IE11 draws small line between positioned elements

匿名 (未验证) 提交于 2019-12-03 08:48:34

问题:

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:

回答1:

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.



回答2:

border-bottom: 1px transparent solid ; margin-bottom: -1px ; /* grey line fix */

all well and good but there is no real answer to the problem here. after a search i found this. and it worked on the IE and safari grey line issue on a simple white box i use.



回答3:

Based on @miguel-svq answer (thanks!!!), which was very helpful, I have 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;      } 


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!