为什么 Box Shadow 不适用于所有浏览器中的表行？

重新访问表行时跨浏览器的 Box Shadow 不一致

尽管努力实现跨浏览器兼容性，

上的 CSS box-shadow ;表行表现出不一致的行为。虽然它出现在某些浏览器上，但在其他浏览器上却莫名其妙地消失了。

这个神秘的问题源于不同浏览器在表行上渲染框阴影时的固有怪癖。为了解决这个异常问题，一个违反直觉的解决方案出现了。

利用变换来触发阴影外观

通过引入一个简单的变换属性，特别是scale(1,1)，与box-shadow配合使用，可以召唤难以捉摸的影子。这项技术有效地触发了跨浏览器的阴影出现。

这是修改后的 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>

此解决方案消除了令人困惑的差异，确保表格行上框阴影的一致显示跨浏览器。

以上是为什么 Box Shadow 不适用于所有浏览器中的表行？的详细内容。更多信息请关注PHP中文网其他相关文章！