html – 边框颜色顺序

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

这让我想想,也许,用于定义颜色的顺序使得它的顶部边框颜色变黑,然后右边框颜色为白色(覆盖右上角),然后底部边框为黑色(覆盖底部)右边角落),并且左边的边框是彩色的.

事实是,在白色背景上,顶部和底部边框看起来不是相同的长度(通过一个像素).这可能不是很多,但是我需要这两个边框来适应我页面上的其他行.

那么我该如何解决呢？它是真的关于边框着色的顺序,如果是,我该怎么改变呢？

解决方法

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

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

IE浏览器：

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

火狐：

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

铬：

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

苹果浏览器：

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

歌剧：

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

看起来好像不同的浏览器供应商不同意使用与所有其他浏览器不同的方法…

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

所以,如果你需要完全控制如何绘制角落,你可以使用彼此之间的两个元素,将垂直边框放在一个和另一个的水平边界上.

原文地址：https://www.jb51.cc/html/224731.html