css - IE左上角边框不同

Question

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像素。

Answer 1

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

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