IE11在定位的元素之间绘制小线 [英] IE11 draws small line between positioned elements

问题描述

我用HTML和CSS构造了一个思想泡泡，并且发现一个问题只在IE11 - 每一个其他浏览器（下到IE9）工作伟大。

：
有一个包含文本的容器，并给它一个背景颜色和圆角。然后把另一个元素，使它看起来像一个箭头。将箭头放在容器旁边。

问题：
不知何故，即使箭头完全调整，箭头和容器之间的线。这行的高度小于1px。如果我将箭头向上移动一个缺口，那么它位于容器内，由于箭头和容器必须具有透明度，因此无法被接受。

这里是jsfiddle显示问题：
）我认为这不应该被视为一个错误，这些只是执行决定，我们不同的浏览器不同。

最常见的解决方案是使用边框宽度（0.5px，1px，2px）和半径（偶数/奇数大小）或者甚至小数位置（底部：-19.5px？）。不能说wich组合将产生这种情况下最好的结果，因为我不能在Windows 7 + IE11中重现。

I constructed a thought bubble with HTML and CSS and found an issue solely on IE11 - every other browser (down to IE9) works great.

The idea is simple: Have a container that contains text and give it a background-color and round corners. Then put another element into it and make it look like an arrow. Position the arrow so that it sits right next to the container.

The problem: Somehow, even though the arrow sits perfectly adjusted, there is a very small line between arrow and container. And this line is less then 1px in height. If I move the arrow up a notch then it sits inside the container which cannot be accepted due to the fact that arrow and container must have transparency.

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

HTML really is simple.

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

CSS is equally simple and boils down to this (some pseudo code 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 seizes to exist the more I let IE11 zoom in or if the browser window's height is changed.

Here's what it looks like with the gap in IE11:

A screenshot of this picture, zoomed at 500% shows this:

解决方案

It's because the way the border is calculated. Screen is a finite grid, so when you decide that the center of the arc is at coordinates e.g. "10 x, 10 y" it could mean different things:

• the center of the arc is in the middle of the 10th pixel?
• the center of the arc is at the begginnig of the 10th pixel?
• the center of the arc is at the end of the 10th pixel?

So, when it draws the arc with radius 10px it could go half pixel farther (or closer) from the point you expected (and will yield "half pixel" sizes, a 2px gray line where you wanted 1px black, a circle that is not really round or some other sad surprise).

This kind of different behaviour is common among the major browsers (e.g. see this: Border-radius: 50% not producing perfect circles in Chrome ) I think it shouldn't be considered a bug, those are just implementation decisions that unluckily for us differ from a browser to another.

The most common solutions is to play with the border width (0.5px,1px,2px) and radius (even/odd sizes) or even positioning with decimals (bottom: -19.5px?). Can't say wich combination will yield best results for this case since I can't reproduce it in Windows 7 + IE11.

这篇关于IE11在定位的元素之间绘制小线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！