html - 边框颜色顺序

Question

我有一个表格，每个边框都设置为 1px 宽度实心。我希望顶部、左侧和底部边框为黑色，右侧边框为白色。所以，我使用了这个 css 代码

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

问题出现在IE9中，右上角的像素点是白色的，但右下角的像素点是黑色的。

我怀疑问题出在 IE9 重新组织样式的方式上，因为当我在开发者工具控制台中查看表格的 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;

这让我想到，也许，用于定义颜色的顺序使得顶部边框为黑色，然后右侧边框为白色(覆盖右上角)，然后底部边框为黑色(覆盖右下角)，最后左边框颜色为左。

问题是，在白色背景上，顶部和底部边框的长度似乎不同(相差一个像素)。它可能不多，但我需要这两个边框与我页面上的其他线条相匹配。

那么，我该如何解决这个问题？这真的与边框的着色顺序有关吗？如果是，我该如何更改？

Answer 1

指定边框颜色的顺序无关紧要。浏览器只是以不同的方式显示边框。 Angular 落中的像素从两侧获取颜色，这取决于您使用的浏览器。

使用了几种不同的方法。以下是最常见的浏览器，以及它们如何画 Angular :

Internet Explorer:

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

火狐:

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

Chrome:

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

Safari :

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

歌剧:

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

看起来好像不同的浏览器供应商不遗余力地使用一种不同于所有其他浏览器的方法...

(在最近的版本中测试过。任何浏览器的旧版本可能会有所不同，但这并不重要，因为它们之间的差异太大了。)

因此，如果您需要完全控制 Angular 的绘制方式，您可以在彼此内部使用两个元素，将垂直边框放在一个元素上，将水平边框放在另一个元素上。