Question

直到今天，IE 10和11对css并没有让我失望。

课程base和triangle在IE 9 - 11之间的差距大约为1px。其他4个浏览器没有显示差距。

.base {
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: -8px;
    background-color: #ffcc00;
    color: #5A5A5A;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    text-decoration: none;
    margin:0;
}
.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 0 11px;
    border-color: transparent transparent transparent #DBB004;
    display: inline-block;
    position: absolute;
    bottom: 24px;
    right: -8px;
    margin:0;
    z-index: -1;
}

这是FIDDLE

Answer 1

这不是错误。这是浏览器对display: inline-block;元素的正确呈现。浏览器使用宽度等于字体的单个空白字符的内联块元素（因此，字体越大，间隙越宽）。

您可以在CSS Tricks here 了解如何解决此问题。但是，通常为-4px的负边距（如果您的正文字体大小为16px）将删除空白区域。例如：

.element {
    display: inline-block;
}

.element ~ .element {
    margin-left: -4px;
}

修改

处理空白区域的更好方法是在父元素上设置font-size: 0;并重置font-size: 18px;或使用{{1}重置每个元素的正文字体大小} elements`。这将处理浏览器缩放和雇用显示比我上面描述的方法更好。显然，这种策略有时需要额外的父元素，这可能会破坏您的布局样式。

Answer 2

将.triangle页边距更改为-1px。

Answer 3

另一种解决方法是将三角形放在基本元素中。最容易用::after pseduo元素替换它。

.base::after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 0 11px;
    border-color: transparent transparent transparent #DBB004;
    display: inline-block;
    position: absolute;
    top: -10px;
    right: 0px;
    margin:0;
    z-index: -1;
}

http://jsfiddle.net/WrVYd/21/

在IE 11中，2个div有大约1px的差距

3 个答案:

修改