边框颜色顺序

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

您调整边框颜色的顺序无关紧要.浏览器只是以不同的方式显示边框.角落中的像素从任何一侧获得颜色,这取决于您使用的浏览器.

有几种不同的方法.以下是最常见的浏览器,以及它们如何绘制角落:

IE浏览器:

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

火狐:

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

铬:

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

苹果浏览器:

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

歌剧:

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

它看起来好像不同的浏览器供应商竭尽全力使用与所有其他浏览器不同的方法......

(在最近的版本中测试过.任何浏览器的旧版本可能会以不同的方式执行,但这并不重要,因为它们之间的差别很大.)

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

Answer 2

所以，这就是，事实上非常简单

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

通过给右边框设置隐藏样式，现在效果很好。问题是，隐藏样式的边框将优先于折叠或重叠边框的任何其他样式。