直到今天,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
答案 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;
}