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

브라우저 간 표 행의 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>

이 솔루션은 혼란스러운 불일치를 제거하여 테이블 행에 상자 그림자가 일관되게 표시되도록 합니다. 다양한 브라우저에서 사용할 수 있습니다.

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