半径奇怪(在IE 9和IE 10中没有发生)
我在IE 11中搜索了与边界半径相关的类似问题,但只有一个在Microsoft IE开发者网站上发现的问题描述了自从“升级”到IE 11以来我目前还在使用的内容。该帖子的答案是确定DOCTYPE是HTML5,而不是Quirks。
我目前正在完成一个网站的重新设计,是的,它是HTML5,并具有正确的DOCTYPE,但我仍然遇到一个边界半径奇怪的问题。 几乎每个我应用边界半径的元素都有1px的偏移量。 如果我取消选中border-radius,问题就会消失,并且一切正常,但令人震惊的是,在IE 9或IE 10中这不是问题。仅在前几天IE 11之后,这个问题才浮出水面。 我已经在IE 11和Windows 8.1上使用IE 11测试了Windows 7,并且两者都存在问题。
例1:
我在这里有一个border-radius: 5px 0 0 5px
,然后应用单独的伪元素:before和:after得到指向的三角形,但border-radius似乎创建了1px的白线,所以它不再与元素的其余部分。 即使在IE 8中也能正常工作,但现在在IE 11中被破坏了。如果我删除边界半径,则伪元素三角形将再次与元素齐平。
例2:
显示为内联块的<a>
链接按钮具有用于背景的线性渐变,蓝色1px实线边框和border-radius: 4px
。 但border-radius在蓝色的1px边框内创建另一个1px的白色线条。 无论任何其他边界半径值,白线都会保留,除非边界半径为0。
例3:
将三个<a>
链接元素设置为display: inline-block
在<div>
内的display: inline-block
相对于其下的另一个<div>
定位。 底部的<div>
具有border-radius: 4px
,顶部<div>
的<a>
元素在顶部左侧和右侧(显示)具有边界半径。 IE 11在两个<div>
元素之间显示1px的间隔(如上面链接的其他海报帖子所示)。 但是,如果底部<div>
的边界半径设置为0,则间距消失。
同样,这些实例在IE 9和IE 10中都没有问题; 只是因为IE 11出现了具有边界半径元素的这个“1px间隙”。 我不知道如何解决它。 当然,没有其他浏览器受到影响。 Firefox,Safari,Opera和Chrome都可以正常显示。
任何帮助将不胜感激。
据我所知在IE11中有一个border-radius
的bug。 您所描述的问题可能是更大局面的一部分。 更多信息。
分数像素解决方法可能导致Firefox将文本偏斜1像素,原因在于它们的像素对齐解决方法可以为选择性字体大小中的明暗类型模糊提供帮助。
在这个msdn线程(你发布的地方)中的溢出:隐藏的包装解决方法可能不那么容易出现这样的兼容性问题。
我认为你在CSS中忘记了锚标签重置属性。
其实IE自动采取1px边框,你必须在你的css img标签中写入重置属性,标签边框:无
像下面的代码
img {border:none;outline:none}
a {border:none;outline:none}
链接地址: http://www.djcxy.com/p/40515.html
上一篇: radius weirdness (did not occur in IE 9 and IE 10)
下一篇: Changing the Background Opacity in IE8 of a TD removes borders...?