边框颜色顺序

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

你可以这样写：

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

Answer 2

事实上，这很简单

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

通过为右边框添加隐藏样式，现在效果很好。问题是，对于折叠或覆盖的边界，隐藏样式的边界将优先于任何其他样式。

Answer 3

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

使用了几种不同的方法。以下是最常见的浏览器，以及它们如何绘制角点：

Internet Explorer：

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

Firefox：

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

镀铬：

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

Safari：

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

歌剧院：

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

看起来好像不同的浏览器供应商千方百计地使用一种不同于所有其他浏览器的方法。。。

（在最新版本中进行了测试。任何浏览器的旧版本都可能会有所不同，但这并不重要，因为它们的差异太大了。）

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