為什麼 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中文網其他相關文章！