html - 0px 的 CSS border-width 仍然在 Internet Explorer 中呈现 1px？

Question

我有以下内容:

.icon {
 border-style: solid;
 border-width: 2px 2px 0 0;
 transform: rotate(-45deg);
}

底部边框设置为 0 像素，但在下面的图像中，边框仍以 1 像素呈现。负值显然不是一个选项。

Answer 1

根据 somethinghere 的建议将 border-bottom:none 添加到 .icon 中，如下所示:

.icon {
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-bottom: none;
    transform: rotate(-45deg);
}

或者:

.icon{
    border-top: 2px solid #454545;
    border-right: 2px solid #454545;
    transform: rotate(-45deg);
}

请尝试在IE中查看此页面，看看问题是否解决。

.box{
  width:100px;
  height:100px;
  margin: 100px auto;
}
.icon{
  border-top: 2px solid #454545;
  border-right: 2px solid #454545;
  transform: rotate(-45deg);
}

<div class="box icon"></div>