我的网站上的徽标存在问题,但仅限于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文件......
有更简单的解决方案吗?
答案 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; ?>