雙邊框CSS3 - FF！Chrome

Question

我想知道，爲什麼這個雙邊框TDs不會在Chrome中顯示，但只在FF中顯示？任何想法可能是什麼工作？謝謝！

http://jsfiddle.net/yQQLk/1/

Answer 1

試試這個，它工作在兩個瀏覽器：

td { 
    -moz-box-shadow: 0 1px 0 #000; 
-webkit-box-shadow: 0 1px 0 #000; 
     border-bottom: 1px solid red; 
     box-shadow: 0 2px 0 #000; 

} 

我想，這就是問題所在：box-shadow: 0 1px 0 #000;

Answer 2

提高您的邊框厚度看到兩個瀏覽器之間的呈現差異更obvious demonstration。看起來在FF中，盒子陰影疊加在邊界頂部，在Chrome中隱藏在下面。

您可以使用另一種方法 - 可能是使用邊框底部和文本修飾：下劃線。

Answer 3

不確定爲什麼你使用box-shadow來產生雙邊框，當border屬性本身已經支持自己的雙邊框。只需使用下面的CSS，而不是你有什麼：

td { 
    border-bottom: 3px double red; 
} 

注意你需要增加邊框的大小3px這樣既行的顯示（與1px，有時沒有按」 t當你指定double時顯示）。

另一個優點是，這將適用於所有瀏覽器，包括不支持box-shadow的舊版瀏覽器。