Chrome 및 Safari에서 내 버튼 하단에 1px 간격이 있는 이유는 무엇입니까?

브라우저 간 버튼 렌더링의 하위 픽셀 불일치

버튼이 내장된 입력 필드로 구성된 구성 요소 렌더링의 불일치는 다음에서 비롯됩니다. 브라우저 간 하위 픽셀 계산의 차이.

문제 설명

Firefox는 높이가 100%이고 테두리가 보이는 버튼을 올바르게 렌더링하는 반면, Chrome과 Safari는 1px를 도입합니다. 바닥에 틈. 이 문제는 Chrome이 여백을 정수로 반올림하여 버튼의 아래쪽 여백을 잘못 계산하기 때문에 발생합니다.

해결책

이 브라우저 간 렌더링 불일치를 해결하려면 버튼에서 투명한 테두리까지 마진을 사용합니다. 버튼의 테두리를 1px로 설정하고 background-clip: padding-box 속성을 적용하여 투명도가 배경에 영향을 미치지 않도록 합니다. 또한 Chrome의 확대/축소 관련 버그를 해결하려면 em 기반 패딩을 고정 픽셀 값으로 바꾸세요.

최종 코드 조각

<code class="css">.wrapper {
  position: relative;
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  background-color: limegreen;
  line-height: 3em;
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 0px 2px black;
}</code>

위 내용은 Chrome 및 Safari에서 내 버튼 하단에 1px 간격이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!