到目前为止,IE 10和11并没有让我失望. .
在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
最佳答案
这不是一个错误.这是display的正确渲染：inline-block;浏览器的元素.浏览器使用宽度等于字体的单个空白字符的内联块元素(因此,字体越大,间隙越宽).
您可以在CSS Tricks here阅读如何解决此问题.但是,通常为-4px的负边距(如果您的正文字体大小为16px)将删除空白区域.例如：
.element {
display: inline-block;
}
.element ~ .element {
margin-left: -4px;
}
编辑
处理空白区域的更好方法是设置font-size：0;在父元素上并重置font-size：18px;或者你的身体字体大小在每个元素上显示：inline-block; elements`.这将处理浏览器缩放和雇用显示比我上面描述的方法更好.显然,此策略有时需要额外的父元素,这可能会破坏您的布局样式.
