Apple Safari 및 휴대용 브라우저 CSS 문제

Question

내 사이트의 로고에 문제가 있지만 Apple 장치의 Safari에서만 문제가 있습니다. 큰 파란색 "IIO"링크 사각형이어야한다 http://iiointeractive.com/

:

이 내 사이트입니다. Windows 용 Safari를 포함하여 테스트 한 모든 브라우저에 올바르게 표시되지만 모든 Apple 장치의 Safari에 사각형으로 표시됩니다. 여기

이 문제의 스크린 샷입니다 :

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

CSS의는 다음과 같습니다 : 파일이 HTML은 다음과 같습니다

제거 내가 할 line-height를 사용하여 시도

//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; 
} 

일관된 스타일이지만 파란색 배경의 높이에 영향을 미치지 않았습니다. height을 변경해도 아무런 변화가 없습니다. padding-top을 사용하여 Safari의 디스플레이를 수정할 수 있지만이 방법은 다른 모든 브라우저의 스타일을 망칠 수 있습니다. 내가 생각할 수있는

유일한 해결책은

이 쉬운 솔루션이 있습니까 ... 사용자의 OS와 브라우저를 감지하고 다른 패딩 값을 추가 CSS 파일을로드 할 수있는 PHP 스크립트를 작성하는 것입니다?

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