使用CSS 將box-shadow 應用於表格行時,您可能會遇到不同瀏覽器之間不一致的行為。某些瀏覽器會如預期顯示陰影,而其他瀏覽器則不然。
當瀏覽器使用硬體加速渲染表格時會出現問題,有時會幹擾
要解決此問題,解決方案涉及將變換屬性與box-shadow 一起使用。透過將transform屬性設為scale(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>
透過將此程式碼新增至 CSS,您可以確保盒子陰影在所有支援硬體加速的瀏覽器上一致地呈現。
以上是如何確保跨瀏覽器表行上的框陰影一致?的詳細內容。更多資訊請關注PHP中文網其他相關文章!