1

我的网站上的徽标有问题，但仅限于 Apple 设备上的 Safari。

这是我的网站：http: //iiointeractive.com/

大的蓝色“iio”链接应该是一个正方形。它在我测试过的每个浏览器中都能正常显示——包括 Windows 上的 Safari——但在所有 Apple 设备上的 Safari 中显示为矩形。

这是问题的屏幕截图：文件已删除

HTML 如下所示：

<div id='logo_iio'>
   <a href="/">iio</a>
</div>

CSS 看起来像这样：

//reset
html,body,a,p{
   padding:0;
   margin:0;
}
#logo_iio {
   font-family: 'Agency';
   font-weight: normal;
   text-shadow: 0 -1px 0 rgba(0,0,0,.5);
   float: left;
}
#logo_wrap a {
   font-size: 80px;
   color: white;
   text-decoration: none;
   background-color: #00baff;
   padding: 0 25px 10px;
}

我尝试使用line-height使样式保持一致，但它并没有影响蓝色背景的高度。改变height没有任何作用。我可以用它padding-top来修复 Safari 中的显示，但这会弄乱所有其他浏览器中的样式。

我能想到的唯一解决方案是编写一个php脚本来检测用户的操作系统和浏览器并加载一个具有不同填充值的附加CSS文件......

有更简单的解决方案吗？

4

1 回答 1

1

我猜不是。

一次更新 - 我发现问题不仅在 Apple 设备上，而且在所有手持设备上。

head这是那个 php 脚本 - 把它放在元素的末尾：

function getOS() { 

    global $user_agent;
    $os_platform    =   "Unknown OS Platform";
    $os_array       =   array(
                            '/windows nt 6.3/i'     =>  'Windows 8.1',
                            '/windows nt 6.2/i'     =>  'Windows 8',
                            '/windows nt 6.1/i'     =>  'Windows 7',
                            '/windows nt 6.0/i'     =>  'Windows Vista',
                            '/windows nt 5.2/i'     =>  'Windows Server 2003/XP x64',
                            '/windows nt 5.1/i'     =>  'Windows XP',
                            '/windows xp/i'         =>  'Windows XP',
                            '/windows nt 5.0/i'     =>  'Windows 2000',
                            '/windows me/i'         =>  'Windows ME',
                            '/win98/i'              =>  'Windows 98',
                            '/win95/i'              =>  'Windows 95',
                            '/win16/i'              =>  'Windows 3.11',
                            '/macintosh|mac os x/i' =>  'Mac OS X',
                            '/mac_powerpc/i'        =>  'Mac OS 9',
                            '/linux/i'              =>  'Linux',
                            '/ubuntu/i'             =>  'Ubuntu',
                            '/iphone/i'             =>  'iPhone',
                            '/ipod/i'               =>  'iPod',
                            '/ipad/i'               =>  'iPad',
                            '/android/i'            =>  'Android',
                            '/blackberry/i'         =>  'BlackBerry',
                            '/webos/i'              =>  'Mobile'
                        );
    foreach ($os_array as $regex => $value)
        if (preg_match($regex, $user_agent))
            $os_platform    =   $value;
    return $os_platform;
}

function getBrowser() {
    global $user_agent;
    $browser        =   "Unknown Browser";
    $browser_array  =   array(
                            '/msie/i'       =>  'Internet Explorer',
                            '/firefox/i'    =>  'Firefox',
                            '/safari/i'     =>  'Safari',
                            '/chrome/i'     =>  'Chrome',
                            '/opera/i'      =>  'Opera',
                            '/netscape/i'   =>  'Netscape',
                            '/maxthon/i'    =>  'Maxthon',
                            '/konqueror/i'  =>  'Konqueror',
                            '/mobile/i'     =>  'Handheld Browser'
                        );
    foreach ($browser_array as $regex => $value)
        if (preg_match($regex, $user_agent)) 
            $browser    =   $value;
    return $browser;
}

$OS = getOS();
$browser = getBrowser();
if($browser=='Handheld Browser'
    ||(($OS=='Mac OS X'||$OS=='Mac OS 9'||$OS=='iPhone'||$OS=='iPod'||$OS=='iPad'||$OS=='Mobile')&&($browser=='Safari'))) : ?>
    <style type="text/css">
        #logo_wrap a{padding-top:15px !important}
        #message{width:355px}
        #contactForm input{padding-bottom:10px}
        #service h3{margin-bottom: 20px}
    </style>
<?php endif; ?>
于 2014-09-10T17:35:22.853 回答