안드로이드에서 부분적으로 투명한 배경을 가진 div 밑의 기발한 얇은 선

#mainHeader { 
    background: url(../img/header.png) repeat-x; 
    width: 100%; 
    height: 60px; 
    margin: 0 auto; 
}

이미지가 정확히 60 픽셀 높고 라인이 accidentically 배경 이미지의 일부가 아닌 경우 물론 이미 확인한 다음과 같이 헤더

CSS의는 것입니다. 그것은 아니지만 재밌는 점은 #mainHeader의 높이를 59px로 설정하면 줄이 사라진다는 점입니다.

누구든지 이것이 무엇 일 수 있는지 알고 있습니다. 그게 버그 야? 또는 내가 모르는 CSS 속성으로 쉽게 고칠 수있는 것이 있습니까?

미리 감사드립니다. #mainHeader CSS에 overflow:hidden를 추가

Weird line

2013-03-06 Anonymous

내가 언급 한 행을 볼 수 없습니다. – otinanai

@otinanai 아래쪽의 첫 번째 줄 /// 또는 // 초록색 다음의 두 번째 줄. – Michel

패턴이 픽셀 단위로 얼마나 큽니까? 패턴의 맨 아래 나 맨 위에 반투명 픽셀이있을 가능성이 있습니다. Photoshop에서 이미지 확인 – otinanai

보십시오. 그러면 브라우저에서 div 외부의 하위 콘텐츠를 렌더링하지 않도록하고 문제를 해결할 수 있습니다.

2013-03-06 23:46:46

나중에 시도해 보겠습니다. 현재로서는 머리글 img 상단에 녹색 픽셀 1 행을 추가하고

요소 높이에서 1 픽셀을 빼서 문제를 해결했습니다. –

반투명 *.png을 사용할 때 동일한 문제가 발생했습니다. 안드로이드가 이미지를 스케일하는 방식 때문인 것 같습니다. 단지 (. 예를 들어, 단지 x 1 픽셀로 이동하는) 도움이 보인다 이러한 두 가지 옵션 하구 -

background-position, background-size은 :이이 처리 할 수있을 것 같다. 그러나이 문제는 특정 해상도 일 수 있으므로 모든 장치에서이 문제가 해결되지 않을 수 있습니다.
모든 반투명 레이어를 CSS3 linear-gradient으로 교체하면 완벽하게 작동합니다. linear-gradient은 모든 모바일 브라우저 중에서 very well supported이므로 이것이 최선의 방법이라고 생각합니다.

2016-01-19 16:03:56 martin

답변