12

我有一个表格，每个边框都设置为 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;

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

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

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

4

3 回答 3

20

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

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

IE浏览器：

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

火狐：

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

铬合金：

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

苹果浏览器：

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

歌剧：

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

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

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

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

于 2012-06-04T15:41:55.003 回答
4

所以，这就是，其实很简单

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

通过为右边框设置隐藏样式，它现在可以完美运行。问题是隐藏样式的边框将优先于折叠或重叠边框的任何其他样式。

于 2012-06-04T16:02:54.713 回答
1

你可以这样写：

div{
 border:1px solid black;
 border-right-color:white;
}
于 2012-06-04T15:53:12.260 回答