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

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

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

Internet Explorer：

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

<强>火狐：

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

<强>铬：

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

<强> Safari浏览器：

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

<强>歌剧：

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

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

（在最近的版本中测试过。任何浏览器的旧版本都可能采用不同的方式，但这并不重要，因为它们之间的差别很大。）

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

Answer 2

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

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

通过赋予右边框隐藏的样式，它现在可以完美地工作。问题是隐藏样式的边框将位于折叠或覆盖边框的任何其他样式之前。

Answer 3

您可以这样写：

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

边框颜色顺序

3 个答案: