IE11 draws a small line between elements located

Question

I built a thought bubble with HTML and CSS and found the problem exclusively on IE11 - every other browser (up to IE9) works fine.

The idea is simple: Have a container containing text and giving it a background color and round corners. Then insert another element into it and make it look like an arrow. Position the arrow so that it is next to the container.

Problem: Be that as it may, although the arrow sits perfectly adjusted, there is a very small line between the arrow and the container. And this line is less than 1px high. If I move the arrow up to the mark, then it is inside the container, which cannot be accepted because the arrow and container must have transparency.

Here is the jsfiddle showing the problem: http://jsfiddle.net/hurrtz/t2RhR/3/

HTML is really simple.

<div id="bubble">
    <div class="arrow"></div>
</div>

CSS is equally simple and boils down to this (some pseudocode ahead):

#bubble {
    (some dimension giving)
    background-color: rgba(0,0,0,0.5); //black, semitransparent
    position: relative;
}

#bubble .arrow {
    position: absolute;
    bottom: 0 - height of arrow:
    background-color: rgba(0,0,0,0.5); //black, semitransparent
}

By the way: the problem increases, decreases or lingers, the more I allow IE11 to increase or change the height of the browser window.

Here's what looks like with a space in IE11:

A screenshot of this image, enlarged by 500%, shows the following:

Answer 1

This is because the boundary is calculated. The screen is the final grid, so when you decide that the center of the arc is in coordinates, for example. "10 x, 10 y" it can mean different things:

• Is the center of the arc in the middle of the 10th pixel?
• 10- ?
• 10- ?

, 10px, ( ) ( " ", 2px, 1px , - ).

(, . : : 50% Chrome) , " , , , , .

(0.5px, 1px, 2px) (/ ) (: -19.5px?). , , Windows 7 + IE11.

Answer 2

border-bottom: 1px; margin-bottom: -1px;/* */

, . . IE , .

Answer 3

Based on @ miguel-svq's answer (thanks !!!), which was very helpful, I simplified it with the following:

#bubble{
       /* Set the border color to match your surrounding background. 
          It will take away the grey line in IE11 */
       border: solid 0.5px #f0f0f0; 
    }