IE左上角边框不同

Question

IE边框绘图和镀铬边框绘图不同。这是我的问题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

在这种情况下，我认为其中任何一个浏览器都不对;他们刚刚采用相同的标准略有不同。在这种情况下，边界的角被指定为分隔两种颜色的对角线。当然，当它只有一个像素宽时，对角线是没有意义的;规范并没有说更喜欢垂直或水平线，所以你可以在这里看到不同的解释空间。

如果您确实需要在这种情况下保证颜色，我建议您使用:before和:after在主框旁边创建边框。