邊框顏色順序

Question

我有一個表格，每個邊框設置爲1px寬度。 我希望頂部，左側和底部邊框爲黑色，右側邊框爲白色。 所以，我用這個CSS代碼

border-right-color: white;  
border-left-color: black; 
border-top-color: black; 
border-bottom-color: black; 
border: solid 1px; 

問題就來了IE9中，其中右上角的像素將是白色的，但右下角會變黑。

我懷疑問題就來形成的方式IE9重組的風格，因爲當我看着我的表在developper工具控制檯的CSS，它被下令這樣的：

border-top-color: black; 
border-right-color: white; 
border-bottom-color: black; 
border-left-color: black; 
border-top-width: 1px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 

這讓我覺得也就是說，用於定義顏色的順序使頂部邊框變爲黑色，然後右邊框變爲白色（覆蓋右上角），然後底部邊框變爲黑色（覆蓋右下角）和finnaly左邊框左邊是着色的。

問題是，在白色背景上，頂部和底部邊框看起來不是相同的長度（一個像素）。它可能並不多，但我需要這兩個邊框以適合我的頁面上的其他行。

那麼，我該如何解決這個問題？是否真的關於邊框顏色的順序，如果是這樣，我怎麼能改變它？

Answer 1

所以，在這裏，實際上

border: solid 1px black; 
border-right-style: hidden; 

很簡單，通過給右邊框的樣式隱藏的，現在完美的作品。事情是隱藏的樣式的邊框將先於摺疊或覆蓋邊框的任何其他樣式。

Answer 2

您使邊框顏色散射的順序無關緊要。瀏覽器只是以不同的方式顯示邊框。角落中的像素可以從任何一側獲得顏色，並且取決於您使用的瀏覽器。

有幾種不同的使用方法。以下是最常見的瀏覽器，以及他們是如何得出的角落：

Internet Explorer中：

+----------------------+--+ 
|      | | 
+----------------------| | 
| |     | | 
| |     | | 
| |     | | 
| +----------------------+ 
| |      | 
+--+----------------------+ 

火狐：

+--+----------------------+ 
| |      | 
| +----------------------+ 
| |     | | 
| |     | | 
| |     | | 
+----------------------| | 
|      | | 
+----------------------+--+ 

鉻：

+--+----------------------+ 
| |      | 
| |----------------------+ 
| |     | | 
| |     | | 
| |     | | 
| +----------------------+ 
| |      | 
+--+----------------------+ 

Safari瀏覽器：

+--+-------------------+--+ 
| |     | | 
| |-------------------| | 
| |     | | 
| |     | | 
| |     | | 
| +-------------------+ | 
| |     | | 
+--+-------------------+--+ 

歌劇：

+-------------------------+ 
|       | 
+-------------------------+ 
| |     | | 
| |     | | 
| |     | | 
| +-------------------+ | 
| |     | | 
+--+-------------------+--+ 

它看起來幾乎一樣，如果不同的瀏覽器廠商走出自己的使用，不同於所有其他瀏覽器不同的方法方式.. 。

（在最近的版本中測試過。任何瀏覽器的舊版本可能會做不同的事情，但這並不重要，因爲它們的差異非常大）。

所以，如果您需要完全控制如何繪製拐角，則可以在每個內部使用兩個元素另一方面，將垂直邊界放在一個邊界上，另一邊放置水平邊界。

Answer 3

你可以這樣寫：

div{ 
border:1px solid black; 
border-right-color:white; 
}