IE bug: 1像素的dotted/dashed边框
作者:糖伴西红柿 来源:前端观察 发布时间:2009-10-28 18:45:00
最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。
首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于:
dashed:来自 dash(破折号),由 dash 组成的虚线
dotted:来自 dot (点),由 dot 组成的虚线,也称点线
这里多说几句废话,其实参看下 demo,就能从视觉上获得更直观的感受了。
下面再说说相关的 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 边框,从视觉上实现正常效果。很啰嗦,很讨厌,很无奈。
.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;
}
详情请参考DEMO:ie-dotted-bug.htm (2.10 KB)
猜你喜欢
- asp使用SQL语句,查询数据库中的第10-20条记录的l方法,两种sql语句写法如下:1、select top 10 * from tab
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 2 - Selectors如果你还没有准备好,请先
- 什么是RSS?RSS是站点用来和其他站点之间共享内容的一种简易方式(也叫聚合内容),通常被用于新闻和其他按顺序排列的网站,例如Blog。一段
- 我们可以利用err对象来判断。当程序没有出现错误就说明已经执行了sql操作: sql="insert into
- 举例如下:<HTML> <HEAD>  
- 插件下载:blueideasearch.xpi首先第一步 说一下怎么样查看firefox插件的源码, 就我上边写的那个东西,把它下载下来.将
- <%Dim sc4Json Sub InitScriptControlSet sc
- 一、备份数据库1、打开SQL企业管理器,在控制台根目录中依次点开Microsoft SQL Server2、SQL Server组-->
- 阅读上一篇:javascript面向对象编程(三)继承是面向对象语言中的一个重要概念,现在我们来探讨一下继承。在网上搜一下javascrip
- 在新建数据库或附加数据库后,想添加关系表,结果出现下面的错误: 此数据库没有有效所有者,因此无法安装数据库关系图支持对象。若要继续,请首先使
- 简介:设计稿尺寸标注与取色专用工具,适用于设计、界面开发与网页前端安装包仅700KB,全绿色独有的双模式切换可支持双屏显示器,一面设计,一面
- [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ][操作系统:Windows]
- Douglas Crockford是JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《J
- 因此,在我接触那么多种语言当中,asp是最不严格的一种,是对程序员要求最低的一种。 昨天测试了asp.net、php和asp的运行速度比较,
- 插入视图的条件: 1.如果视图是基于一个基础表产生的,那么这就称为非连接视图,所有的非连接视图都是可以更新的,也就是说可以在该视图上进行,I
- 图片按钮是我们经常应用的网页元素,按钮的生成有两种方法,一个是用链接<a>来模拟按钮,一个是用现成的表单按钮。<input
- oblog 推出了4.0的最新版本,这个不是重点,重点是4.0的版本中附带了xml-rpc支持。oblog的支持代表着大量的国内blog站点
- 小毅的blog:http://andymao.com/andy/注:本文实例在IE5.x下可能会显示不出来,请使用IE6、IE7、Firef
- 在ASP中,你可通过VBScript和其他方式调用自程序。实例:调用使用VBScript的子程序如何从ASP调用以VBScript编写的子程
- 有这么一个题目,说bt其实也不bt,为了重点突出其中的意图,特意加上了括号:var a = (++Math.P