2011-11-15 4 views
1

동일한 배경색을 공유하는 절대적으로 인접한 두 요소가 있습니다. 그것들은 내 바탕 화면과 노트북에서 하나의 단일 요소로 보이지만 iPad에서 볼 때 두 요소 사이에 반투명 색상의 얇은 조각 인 명백하게 보이는 "테두리"가 있습니다.iPad의 Safari에서 인접 요소간에 나타나는 슬라이 버를 제거하려면 어떻게합니까?

내가 추측해야 할 것은 벡터 객체가 iOS의 브라우저에서 그려지는 다른 방법 때문이라고 말하고 싶지만, 그것은 내가 한 번 이야기 한 일부 모호한 정보를 기반으로 한 추측 일뿐입니다. 사파리 페이지를 확장하는 경우

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <style type="text/css"> 
      #container { 
       position: relative; 
       width: 200px; 
       height: 40px; 
       background-color: transparent; 
      } 

      #left { 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 50px; 
       height: 40px; 
       background-color: red; 
      } 

      #right { 
       position: absolute; 
       top: 0; 
       left: 50px; 
       width: 150px; 
       height: 40px; 
       background-color: red; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="left"></div> 
      <div id="right"></div> 
     </div> 
    </body> 
</html> 

답변

0

문제는 발생

다음은 아이 패드에서 실행 할 수있는 경우 문제를 표시 할 수 있습니다 전체 샘플 페이지입니다.

Safari는 요소를 개별적으로 조정하므로 하나 이상의면에 1 픽셀 너비의 반투명 가장자리가있는 각 요소가 개별적으로 조정됩니다. 크기가 조정 된 요소를 나란히 배치하면 겹치는 반투명 가장자리가 여전히 100 % 불투명하지 않으므로 일부 배경이 새어 나옵니다.

이 문제는 절대 위치 요소에만 국한되지 않습니다. 인접한 모든 요소에 적용됩니다 (이미지 제외).

예를 들어 테이블의 스타일을 td { background-color:black }으로 설정하면 표 셀 사이에 배경이있는 서브 픽셀 조각이 나타날 수 있습니다. 인접한 두 개의 스팬에서도 문제가 발생합니다.

내 솔루션은 같은 색의 인접 요소가 컨테이너에 래핑되고 배경이 컨테이너에 적용되도록 페이지를 재구성하는 것입니다. 이것은 많은 작업입니다. 귀하의 경우, 빠른 수정 프로그램은 1 픽셀 씩 div를 겹칠 것입니다.

나는 이것이 iPad 버그라고 생각합니다. 페이지를 확대 할 때 내 Windows 브라우저 (Safari 포함)에이 문제가 없습니다.

관련 문제