css - Apple Safari 和手持浏览器 CSS 问题

Question

我网站上的 Logo 有问题，但仅限于 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 文件...

有没有更简单的解决方案？

Answer 1

我猜不是。

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

这是 php 脚本 - 将其放在 head 元素的末尾:

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; ?>