首頁 > web前端 > css教學 > 主體

為什麼表格行上的框陰影在不同瀏覽器中表現不一致?

Patricia Arquette
發布: 2024-10-31 10:44:01
原創
265 人瀏覽過

Why Does Box Shadow on Table Rows Behave Inconsistently Across Browsers?

表格行上的框陰影在瀏覽器中表現不穩定

將CSS 框陰影套用至表行會導致瀏覽器渲染不一致。雖然某些瀏覽器會按預期顯示陰影,但其他瀏覽器無法完全渲染它。

要解決此問題,透過在 box-shadow 中新增 transform: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 /5p91xxr48/

以上是為什麼表格行上的框陰影在不同瀏覽器中表現不一致?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!