Css 2个分区在IE 11中有大约1px的间隙

直到今天，IE 10和11在css方面还没有让我太失望

在IE 9-11中，类

base

和

triangle

之间有大约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;
}

---

这里有一个

将

.triangle

边距更改为

-1px
这不是错误。这是
display:inline块的正确呈现元素。浏览器使用与字体的单个空白字符相等的宽度来分隔内联块元素（因此，字体越大，间距越宽）

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

.element {
    display: inline-block;
}

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

编辑
处理空白的更好方法是设置
font size:0并重置
字体大小：18px或使用
显示：内联块的每个元素上的任何正文字体大小元素`。这将比我上面描述的方法更好地处理浏览器缩放和租用显示。显然，此策略有时需要额外的父元素，这可能会破坏布局样式。
另一种解决方法是将三角形放在基本元素内。最简单的方法是在
psedoo元素之后用
：：替换它

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

即使在操作系统X上的Chrome浏览器中，我也能看到差距。您的三角形元素似乎比应该的位置高一个像素。它实际上比应该的位置低，比应该的位置大，因此ff将显示相同的值。这就是为什么
。三角形
具有
z索引：-1
。实际上，它在W7上完美地展示了Chrome、FF、Opera和Safari。这是否意味着chrome会在其他操作系统版本上呈现不同的效果？我认为你应该在
.base
上定义一个线条高度。还有“W7上的Safari”？什么？只有古老的版本5可用于Windows，您可能应该测试版本6和7。所有Mac浏览器都有1像素的间距。我同意帕夫洛关于线条高度的看法。您需要更多地控制文本框的高度。也许更好的方法是使用
.base:after
或
.base:before
创建三角形。我认为这是因为边距塌陷，虽然我没有预料到，因为元素是绝对定位的。绝对定位的元素不会受到边距折叠的影响。我有一个类似的问题，两个div之间有一个水平间隙，可以通过设置
{margin top:-1px；}