Chrome에서이 블록 요소 사이에 틈새/경계선이있는 이유는 무엇입니까?

컨테이너에 배경색을 추가 한 다음 블록 요소를 내부에 쌓아두면 크롬 요소 사이에가는 선 간격이 표시됩니다. Firefox에는 이러한 차이가 없습니다.Chrome에서이 블록 요소 사이에 틈새/경계선이있는 이유는 무엇입니까?

왜? 그리고 래퍼 요소를 추가하지 않아도 어떻게 피할 수 있습니까?

그것은이에서 볼 쉽다는 빈을 JS :이 꽤 자주 웹킷에서 일어나는 https://razor-x.jsbin.com/teqevoc/6/edit?html,css,output

.main { 
 
    background-color: black; 
 
} 
 

 
.item { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: white; 
 
}

<div class="main"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
</div>

출처

2016-11-17 Evan Sosenko

나는 크롬을 사용 중이므로가는 선이 보이지 않습니다. – j08691

@ j08691 이미지를 추가했습니다. Chrome 버전 54.0.2840.100 (64 비트)을 사용하고 있습니다. –

Windows 10.0.14393 (64 비트)에서 Chrome 56.0.2922.0 (공식 빌드) 카나리아 (64 비트) 또는 54.0.2840.99 (공식 빌드) m (32 비트)의 #norepro – canon

-1

. 일반적으로 파이어 폭스와 같은 브라우저에 눈에 띄는하지 않고 웹킷/크롬에 그것을 수정

position:relative; 
top: -1px;

추가를 통해이 해결 될 수있는 방법 중 일을 밀어 다른 요소가 없습니다 가정.

출처

2016-11-17 20:03:00 CdnXxRRODxX

정확하지 않습니다. – evilReiko

내 프로젝트에서 작동하며 다양한 모바일 장치에서 테스트되었으므로 확장이 문제를 일으키지 않았습니다. – CdnXxRRODxX

위치 : 상대적 및 상단 : -1px는 의미를 분명히합니다. 1px 간격은 종종 큰 문제가 아니지만 완벽한 픽셀 작업을 원하면 올바른 것이 아닙니다. 추가 간격에 영향을 줄 수있는 많은 것들이 있습니다 : 선 높이, 세로 정렬, 글꼴 크기, 패딩, 여백, 최소/최대 높이/너비, 표시, 위치 등. 이름을 지정합니다. – evilReiko

CSS와 HTML 만 사용한다고 가정하면 모든 브라우저에서 완벽하게 작동합니다. HTML에 픽셀이나 요소를 추가하는 크롬 확장 프로그램 일 수도 있습니다. 모든 크롬 확장 (있는 경우)을 사용 중지하고 새로 고침하십시오.

출처

2016-11-17 20:16:50 evilReiko

Chrome에서이 블록 요소 사이에 틈새/경계선이있는 이유는 무엇입니까?

답변

관련 문제