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;
}

Chrome :

即:

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

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

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

有点烦人的 1 像素。

Answer 1

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

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