IE bug:1像素的dotted/dashed边框

最近的一个页面中碰到的，本来想用 border 来模拟设计图的虚线效果，但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。

首先，从字面上来理解，dashed 和 dotted 都是指“虚线”，他们的不同在于：

1、dashed：来自 dash（破折号），由 dash 组成的虚线
2、dotted：来自 dot （点），由 dot 组成的虚线，也称点线

这里多说几句废话，其实参看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Template</title>
        <style type="text/css">
        /*common*/
*{margin:0;padding:0;list-style:none;}
select,input{font-size:12px;}
img{border:0;display:block;margin:0 auto;}
a{color:#333;text-decoration:none;}
a:hover{color:#c42805;text-decoration:underline;}
em{font-style:normal;color:#c42805;}
em a{color:#c42805;}
body{font-size:14px;color:#333;font-family:"宋体",Arial;background-color:#9c9c9c;}
/*wrap*/
.wrap{width:960px;margin:0 auto;}
/*box*/
.box{width:400px;height:285px;padding-top:15px;margin:20px auto;text-align:center;}
.ads{margin-top:10px;}
.b1{border:1px dashed #000;}
.b2{border:1px dotted #000;}
.b3{border:5px dashed #000;}
.b4{border:5px dotted #000;}
.b5{border:1px dotted #000;border-left-width:4px;}
.b6{border:2px dotted #000;padding-top:0;}
.b6 .inner{border:1px solid #9c9c9c;width:100%;height:100%;margin:-1px;position:relative;z-index:100;}
.copyright{padding:5px;text-align:right;}

        </style>
</head>
<body>
	<div class="wrap">
		<div class="box b1">
			dashed = 1px
			<div class="ads">

			</div><!-- .ads -->
		</div><!-- .box b1 -->  
		<div class="box b2">
			dotted = 1px
			<div class="ads">

			</div><!-- .ads -->
		</div><!-- .box b2 -->  
		<div class="box b3">
			dashed &gt; 1px
			<div class="ads">

			</div><!-- .ads -->
		</div><!-- .box b3 -->   
		<div class="box b4">
			dotted &gt; 1px
			<div class="ads">

			</div><!-- .ads -->
		</div><!-- .box b4 --> 
		<div class="box b5">
			dotted 1px 1px 1px 4px
			<div class="ads">

			</div><!-- .ads -->
		</div><!-- .box b5 -->
		<div class="box b6">
			<div class="inner">
				修正后
				<div class="ads">

				</div><!-- .ads -->
			</div><!-- .inner -->
		</div><!-- .box b6 -->
	</div><!-- .wrap -->
</body>
</html>

提示：您可以先修改部分代码再运行，对于jquery等代码需要运行后刷新一次

就能从视觉上获得更直观的感受了。
下面再说说相关的 bug 吧，当然了，这些 bug 再一次只是光荣地出现在了 IE 下，此处涉及到 IE6 和 IE7。

Bug1: 在 IE6 下，1px 宽的 dotted 表现的和 dashed 一样。当宽度大于 1px 时，表现正常。

Bug2:在 IE7 下，当 4 条边的宽度是 1px 和其它任意数值共存时，1px 的 dotted 表现的和 dashed 一样。4 条边的宽度全为 1px，或者为其它不是 1px 的不同值时不会出现这个 bug。

Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 边框，在拖动页面时，有时候边框会连成实线，有时候会出现缺口。

要解决这些 bug，要么直接就不用 dotted 而直接用 dashed；要么用图片代替；要么用额外标签和代码来解决。

鉴于只有在边框宽度为 1px 时才会出现这些 bug，可以设置外包围标签的边框宽度为 2px，通过增加一个内标签，设置其为 1px 的内容背景色边框，再通过设置 margin-top/right/bottom/left: -1px; 来盖掉外包围标签的 1px 边框，从视觉上实现正常效果。很啰嗦，很讨厌，很无奈。

CSS复制代码

.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}

上一篇：由黄钻等级图标处理引发的思考

下一篇：c#中的可空类型

留下脚印压缩包密码:sosuo8

全部评论:

申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ IE bug:1像素的dotted/dashed边框 ”的原作者，若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法：email:ahuinan@21cn.com QQ:106494262

感谢以下网友对网站提出的建议：
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)

文章档案

作者：糖伴西红柿
来源：前端观察
日期：2009-11-14 12:46:00
点击：471

网友投票(您觉得这篇文章怎样？)

请稍侯......

实用文章总结

文章阅读排行

随便看看

最新评论