首页 > web前端 > css教程 > 为什么 Box Shadow 不适用于所有浏览器中的表行?

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

DDD
发布: 2024-10-29 09:32:30
原创
677 人浏览过

Why Doesn't Box Shadow Work on Table Rows in All Browsers?

重新访问表行时跨浏览器的 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板