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)


猜你喜欢
- 平常我们只听说过ADO等一类ASP对象,但在ASP中还有个鲜为人知的专门SQL Server的ASP访问对象,它就是SQLOLE.SQLSe
- 梯度PyTorch的数据结构是tensor,它有个属性叫做requires_grad,设置为True以后,就开始track在其上的所有操作,
- 关于文件下载官网都有提供最新版本的推荐自行下载,如果不介意旧版本的,可以留言我可以分享我是用的版本~Anaconda安装打开下载的.exe文
- 一、固定费用问题案例解析1.1、固定费用问题(Fixed cost problem)固定费用问题,是指求解生产成本最小问题时,总成本包括固定
- 很多序列的方法字符串同样适用,但是,字符串是不可变的,所以一些试图改变字符串的方法是不可用的1 字符串格式化1)用元组或者字典格式化字符串f
- 本文实例讲述了Python进程间通信Queue消息队列用法。分享给大家供大家参考,具体如下:进程间通信-QueueProcess之间有时需要
- 以前的服务器,由于内存的价格过高,一般配置的内存不是很多,超过4GB的当然就不多了.现在的服务器,配置超过4GB就很多,在配作SQL 数据库
- 起因修改了表结构以后执行python3 manage.py migrate 报错:django.db.utils.OperationalEr
- 题记:早已听闻python爬虫框架的大名。近些天学习了下其中的Scrapy爬虫框架,将自己理解的跟大家分享。有表述不当之处,望大神们斧正。一
- Explain工具介绍使用Explain关键字可以模拟优化器执行SQL语句,分析你的查询语句或是结构的性能瓶颈。在select语句之前增加e
- 如何剔除HTML标识?这里没有使用正则表达式来去除,当然大家用正则"<.+?>"也可以实现这个功能只留下干净
- mysql表索引被破坏的问题及解决下午上班,惊闻我的dedecms的网站出问题了,访问一看,果然全屏报错,检查mysql日志,错误信息为:
- 第一中方法:比较详细以下的文章主要介绍的是MySQL 数据库开启远程连接的时机操作流程,其实开启MySQL 数据库远程连接的实际操作步骤并不
- 首先,建一个文件夹,把你要隐藏的文件放在里面,你的所有黑客程序什么的。假设你建的文件夹叫hacker然后呢,我们给这个文件夹加个扩展名(后缀
- 零、前言python代码中配置文件是必不可少的内容。常见的配置文件格式有很多中:ini、yaml、xml、properties、txt、py
- 阻塞定义当来自应用程序的第一个连接控制锁而第二个连接需要相冲突的锁类型时,将发生阻塞。其结果是强制第二个连接等待,而在第一个连接上阻塞。不管
- Jupyter平台默认开发的字体为宋体,在高分屏下视觉效果差在 C:\User\用户名\.jupyter\custom下面的custom.c
- 前言最近在工作中遇到一个问题,在创建数据库后连接数据库的时候居然报错了,错误代码是Access denied for user 'r
- filter是Python的内置方法。官方定义是:filter(function or None, sequence) -> list
- php创建JSON数据详解:<?php //创建一个字符数组 $arr=array( 'id'