ICE左上角边框不同答案

【问题标题】：IE top left corner border diffrentICE左上角边框不同
【发布时间】：2013-06-12 17:08:01
【问题描述】：

IE边框绘制和chrome边框绘制是不同的。这是我的问题 css 和屏幕截图（带缩放）

.test {
    width: 10px;
    height: 10px;
    margin: 10px;
    padding: 10px;
    border-left: 1px solid green;
    border-top: 1px solid red;
    border-bottom: 1px solid black;
    border-right: 1px solid blue;
}

铬：

IE:

Chrome 和其他浏览器的左上角是绿色的，但在 IE 中是红色的。这在我的设计中造成了问题，我该如何解决这个问题？

jsFiddle：http://jsfiddle.net/yLdF4/

编辑：这是我真正的问题截图；

有点烦人的 1 像素。

【问题讨论】：

如果你告诉你想要达到什么样的效果，那么会有一个解决方案。例如你可以使用两个嵌套的 div，一个带有 left 和 right 边框，另一个带有 top 和 bottom
这可能是我在 SO 见过的最小的问题，只有一个像素； )。
是的，只有一个像素，但很烦人 :) 我添加了新的截图，看看 ^

标签： css internet-explorer cross-browser

【解决方案1】：

在这种情况下，我认为这两种浏览器都没有错；他们只是执行相同的标准略有不同。在这种情况下，边框的角被指定为分隔两种颜色的对角线。当然，当它只有一个像素宽时，对角线是毫无意义的；规范并没有说更喜欢垂直线或水平线，因此您在此处看到的解释可能略有不同。

如果您真的需要保证这种情况下的颜色，我建议使用:before 和:after 分别在主框的两侧创建边框。

【讨论】：