테이블 행의 상자 그림자가 브라우저에서 일관되지 않게 동작하는 이유는 무엇입니까?

브라우저에서 비정상적으로 작동하는 테이블 행의 상자 그림자

CSS 상자 그림자를 테이블 행에 적용하면 브라우저 렌더링에 불일치가 발생합니다. 일부 브라우저는 그림자를 의도한 대로 표시하지만 다른 브라우저는 그림자를 완전히 렌더링하지 못합니다.

이 문제를 해결하려면 box-shadow와 함께 변환: scale(1,1) 속성을 추가하면 문제가 해결됩니다. 이를 통해 브라우저 전체에서 일관된 그림자 렌더링이 보장됩니다.

업데이트된 CSS:

<code class="css">tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}</code>

업데이트된 jsFiddle: https://jsfiddle.net/ampicx /5p91xr48/

위 내용은 테이블 행의 상자 그림자가 브라우저에서 일관되지 않게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!