2 divs have about 1px gap in IE 11 - css

Question

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

Answer 1

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

Answer 2

Change the .triangle margin to -1px.

Answer 3

Another way of solving it, is by putting the triangle inside the base-element. Easiest would to replace it with an ::after pseduo-element.
.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/