边框颜色顺序答案

【问题标题】：Border color order边框颜色顺序
【发布时间】：2012-06-08 16:27:29
【问题描述】：

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

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

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

那么，我该如何解决这个问题？真的是关于边框颜色的顺序吗？如果是，我怎么能改变它？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

Internet Explorer：

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

火狐：

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

铬：

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

Safari：

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

歌剧：

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

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

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

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

【讨论】：

+1 这是一个不错的答案。您是否从任何来源获得此信息？
@Christoph：我做了一个测试页面，并在不同的浏览器中进行了测试：jsfiddle.net/Guffa/Ksdjs
awwww，这太可怕了：-D 你有鹰眼吗？
这个。该规范似乎没有明确说明应该如何解决角落的冲突，因此每个浏览器都选择了自己的实现。 @Christoph：大多数浏览器都内置了缩放功能。 ;-)
@DuTran：当你的边框超过一个像素宽时。这是关于当边框为 1 像素宽时如何放置边框的。

【解决方案2】：

其实就是这么简单

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

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

【讨论】：

浏览器从外角到发生颜色偏移的内角绘制一条对角线。如果border-width设置为1px，浏览器不能分割它，所以IE选择右上角的像素为白色，FF-右下角。 CSS3 规范没有说明浏览器应该如何处理连接。通过删除右边框，不会渲染对角线。如果设置 height:0; 会更好看。并尝试制作一些 CSS 三角形。
border-right-style: hidden 基本上是border-right-style: none 对于非表格。看看border-right-color: transparent 有没有什么不同？
这可能是因为您实际上根本不希望右边框为白色，而是实际上不可见（与背景相同）或根本没有边框？
是的，我希望它是透明的，或者与背景颜色相同。我必须同时做这两件事，因为border-style: hidden 在某些版本的 IE 中不起作用。
@Shadowxvii：那很简单。只需为右侧指定无边框：border-style: solid none solid solid;.

【解决方案3】：

你可以这样写：

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

【讨论】：

这是我以前的。似乎 IE9 在渲染页面之前为自己重新组织了它。