IE 10 and 11 hasn't disappointed me so much when it comes to css until today . .
The class base
and triangle
has about 1px gap in between in IE 9 - 11. The other 4 browsers are not showing the gap.
.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;
}
Here's a FIDDLE
This is not a bug. This is the correct rendering of display: inline-block;
elements by the browser. The browser spaces inline-block elements using a width equal to a single white space character of the font (therefore, the larger the font, the wider the gap).
You can read how to solve this issue at CSS Tricks here. However, generally a negative margin-left of -4px (if your body font size is 16px) will remove the white space. For example:
.element {
display: inline-block;
}
.element ~ .element {
margin-left: -4px;
}
A better way of handling the white-space is to set font-size: 0;
on the parent element and reset the font-size: 18px;
or whatever your body font-size is on each of the elements with display: inline-block;
elements`. This will handle browser zooming and hires displays better than the method I described above. Obviously, this strategy sometimes require an additional parent element, which might break your layout styling.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With