Apple Safari和手持浏览器CSS问题

时间:2014-09-08 18:18:23

标签: css safari handheld

我的网站上的徽标存在问题,但仅限于Apple设备上的Safari。

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

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

以下是问题的屏幕截图:FILE REMOVED

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文件......

有更简单的解决方案吗?

1 个答案:

答案 0 :(得分:0)

我猜不是。

一次更新 - 我发现问题不仅出现在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; ?>
相关问题