我目前正在完成一个网站上的重新设计,是的,它是HTML5和具有正确的DOCTYPE,但我仍然得到一个奇怪的问题与border-radius。对于我已经应用了border-radius的几乎每个元素都有一个1px的偏移量。如果我取消选中border-radius,问题消失,一切都很好,但令人震惊的是,这不是一个问题在IE 9或IE 10.只有从IE 11几天前,有这个问题浮出水面。我测试了Windows 7与IE 11和Windows 8.1与IE 11,这两个问题都存在。
实施例1:
我有一个border-radius:5px 0 0 5px这里,然后应用单独的伪元素:before和:after得到指向的三角形,但border-radius似乎创建一个1px白线,因此它不再齐平元素的其余部分。这工作正常,即使在IE 8,但现在在IE 11中断。如果我删除border-radius,伪元素三角形变得与元素再次齐平。
实施例2:
< a>链接按钮,显示为inline-block有背景的线性渐变,蓝色1px实线边框和border-radius:4px。但是border-radius在蓝色1px边框内创建了另一个1px的白线。无论任何其他border-radius值,白线仍保留,除非border-radius为0。
实施例3:
三个<链接元素设置为显示:inline-block在< div>相对于另一个< div>下面它。底部< div>具有border-radius:4px,并且< a>顶部的元素< div>在左上角和右上角有border-radius(显示)。 IE 11在两个< div>之间显示1px间隙。元素(如上面链接的其他海报所示)。但是如果底部< div>上的border-radius设置为0时,间隙消失。
再次,在IE 9和IE 10中没有这些实例是问题;只有因为IE 11有这个“1px gap”与元素具有border-radius出现。我不知道如何解决它。当然没有其他浏览器受到影响。 Firefox,Safari,Opera和Chrome都显示良好。
任何帮助将不胜感激。