西红柿爱番茄

Feed Rss

IE一像素border的问题

03.25.2010, (X)HTML, CSS, by .

今天在做页面的时候,有一个tab组件的需求,需要切换样式:

tab在切换的时候如上面图片所示,左右一个像素的border,上面2像素,下面一个白色像素来覆盖边框。这个在FF等非IE内核的浏览器下显示没有问题,可是在IE浏览器下《问题页面》:

在IE下,激活tab右下角总是多出了一像素高度,为着这个IE下的一像素问题,快崩溃了。最初还以为是IE bug,测试来测试去,最后发现是IE渲染border的方式跟FF等浏览器不同。按原理来说,应该是top、bottom覆盖left、right的border颜色(FF等浏览器正是这么做的),可是IE却不是,它是按照逆时针,类似于是拼接似的来渲染border。这个问题只有在一个像素宽的border的时候才会出现,当大于一像素的时候,问题不存在。

更新的测试页面

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>