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

时间:2013-12-27 13:18:04

标签: css internet-explorer

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

课程basetriangle在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

3 个答案:

答案 0 :(得分:3)

这不是错误。这是浏览器对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`。这将处理浏览器缩放和雇用显示比我上面描述的方法更好。显然,这种策略有时需要额外的父元素,这可能会破坏您的布局样式。

答案 1 :(得分:1)

.triangle页边距更改为-1px

答案 2 :(得分:0)

另一种解决方法是将三角形放在基本元素中。最容易用::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/