IE7下宽度为1px的点状边框表现为虚线边框 BUG

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@szxw 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG?系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

受影响版本

该BUG影响: IE7

表现

当至少一条边框样式被定义为宽度超过1px时,宽度为1px的点状边框表现为虚线边框。

教程日期

2009-08-17 21:03:03 星期一

描述

感谢Gérard Talbot列举了这个BUG。 在IE6中,边框样式为点状的边框表现的如同虚线边框,微软公司在他们的变动总结中声称在IE中已经修复了该BUG。然而,在IE7中,该BUG的某些部分仍然会表现出来。让我们来看一下示例。

示例

示例在一个单独页面上。

HTML 代码:

CSS 代码:

在功能健全的浏览器中,我们这里的<p>元素将会显示为带有点状边框,而在IE7中,宽度为1px的部分(例如,除了左边框外的其他边框)会显示为虚线边框。该BUG会在至少有一边的边框宽度大于1px的时候发生。当所有的边的边框宽度都大于1px的时候,即使不同边框的宽度不同,该BUG也不会发生。

 

解决方案

下面是按照解决方案类型排序的对上述问题的解决方案。

解决方案(最佳方案)

解决方案日期

2009-08-17 21:03:20 星期一

修复版本

所有受影响版本

描述

如果你能够承担得起改动界面的后果,那么只需要简单地把边框宽度为1px的部分改为大于1px即可。另外,也可以不使用点状边框或者让每条边的边框宽度相等。如果上述的解决方案都不能够解决问题的话,可以看一下下面的使用标记语言的解决方案:

修复后的实例在一个单独页面上。

HTML代码:

CSS代码:

我所做的是增加了一个<div>,包裹了其他元素。把<p>的左边框的边框宽度,由原来的4px改为现在的0(这种情况下该BUG不会被触发)。然后,将<div>左边框属性设置为4px dotted #000,这样能够形成一种所有的边框都围绕这一个相同元素的错觉。

收藏 评论

关于作者:酸斋笑我

我不会修电脑。 (新浪微博:@酸斋笑我) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部