IE CSS Bugs 列表和解决方法
我们在开发中我们常会在IE中遇到很多莫名的bug，尤其是老态龙钟的IE6浏览器。为了提高我们的开发效率，需要经常总结，整理工作中遇到的问题。我们在网络上找到的IE Bugs 资料是零散的。不过，在老外的http://haslayout.net/css/网站上,他就系统的总结了IE的一些Bugs，分享一下。
目前，这个网站上包含了 46 个“普通的Bug” ， 5个“布局方面的Bug” ，6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”，所有的这些Bug有58个指南和70个解决方法。
这个列表目前更新到：2009年8月19日，周三 ，15时38分47秒。
最新发表的教程：该网站包含44 IE6 bugs, 28 IE7 bugs 和19 IE8 bugs.
下面是所有的bug列表，你可以点击每个BUG名的链接查看更详细的说明和解决方法。
IE的CSS Bug：普通Bug
这部分 IE 的 bug 是比较普通的无法归到其它种类，或是同时属于多个种类的Bug。
| 解决方法名称 | IE的版本 | 描述 |
|---|---|---|
| Image Label Focus Bug(图片label bug) | IE8, IE7, IE6 | 当label中有img的时候无法触发点击选中form元素事件. |
| No Auto-Margin Center on Buttons Inconsistency (设置margin auto的button没有居中) | IE8 | 如果给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin-left: auto; margin-right: auto; }如果不设置宽度的话无法居中。 |
| Incorrect Float Shrink-Wrap Bug (不正确的浮动伸展布局) | IE7, IE6 | 连续浮动的元素并且设置clear属性没法自动伸展。 |
| Document Scrollbars Overflow Inconsistency （文档滚动bug） | IE7, IE6 | 不在html标签上设置overflow或许会影响到body上面的overflow。 |
| Float Squeeze Weird Gap Bug （连续浮动元素bug） | IE7, IE6 | A gap appears between last and second last floated elements that are stacked vertically. |
| Float Squeeze Duplicate Last Character Bug （连续浮动字符出现重复字符） | IE7, IE6 | 这个和上面的解决方案都差不多，它是通过加一个宽度，而这个是通过给浮动字符加一个position:relative; |
| Empty Element Height Bug （空元素高度bug） | IE7, IE6 | 有layout的空元素获得了高度 |
| Form Control Double Margin Bug （表单元素双margin bug） | IE7, IE6 | input和textarea或许会继承父元素的水平的margin |
| IE7 1px Dotted Border Appears As Dashed Bug （ie7的1px dotted 边框变成dashed边框的bug） | IE7 | 当设置了1px dotted边框后，有一个边框的宽度大于1px 的话其它为1px边框会变为dashed的样式 |
| Relative Overflow Failure Bug（overflow bug） | IE7, IE6 | 当设置了overflow:hidden或auto的元素，如果子元素设置了相对定位，overflow就不起作用了， 表现的是visible的样式，解决方法是给父元素加一个position:relative; |
| IE7 "Broken" :hover Absolute Bug （ie7的坏的:hover 绝对定位bug） | IE7 | 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显示位置时将会不起作用如果他们不再父元素的可视范围内，解决方法是给其加上margin-left:0%; |
| Button Background Shift On :active Bug（当:active时Button背景偏移） | IE8 | 给button设置:active时背景会做偏移，可以通过设置:active时的-ms-background-position-x和-ms-background-position-y来改变这个偏移。 |
| Ignored :focus Bug | IE8 | A ruleset, selector of which contains :focus that is followed by another simple selector, is ignored |
| Invisible Hover Border Bug （:hover边框消失bug） | IE8 | 当设置了outline的元素后，再设置:hover的时候，如果设置边框的话，将会不显示 |
| Percentage Padding Margin Bug （百分比padding垂直margin bug） | IE8 | 当父元素设置了百分比的padding，子元素有垂直的margin的时候， 就好像父元素被设置了margin一样，解决方法是给父元素加一个overflow:hidden/auto |
| Image Float Bullet Chaos Bug （图片浮动List标记错位bug） | IE8 | 当List里面有浮动的image时，List标记显示的位置跑在里面了，可以通过使用背景图片代替List自带的标记来解决。 |
| Non-Inherited TH Text-Align Bug （TH没有继承Text-Align属性的bug） | IE8 | 当给table设置text-align时，TH没有继承样式，可以通过给TH设置text-align:inherit;来解决IE8下这个丑陋的bug。 |
| 32 Styles Limitation （32个Style限制） | IE8, IE7, IE6 | 在32个”style”方法(style, link, @import)后浏览器会忽略后面的样式 |
| Hover White Background Ignore Bug（白色背景hover bug） | IE7 | background 不会因为 :hover而改变，给hover设置background-color:#ffffff;时，背景不会改变，解决方法是设置background:#ffffff; |
| IE7 Child Selector Comment Bug | IE7 | 一个 selector 包含了一个子的selector，如果后面跟着一个注释，则会被完全忽略。 |
| Star HTML Bug （* html bug） | IE6 | * html [selector]在ie6下通常不会被忽略，这个bug通常被用来作IE6的hack使用。 |
| IE6 !important Ignore Bug | IE6 | !important 关键字会忽略，important之后设置同样的规则后important会被忽略，这个bug也常被用来指定ie6的样式。 |
| PNG Image and Background Color Mismatch （png图片和背景颜色不一致） | IE8 ,IE7,IE6 | 设置背景颜色和png图片背景同样的颜色代码最后表现不一致，原来是因为ie支持“PNG Gamma profiles”，解决方案是通过一个pngcrush程序来优化图片。而他们本来是一致的。IE认为这是他一个Feature。太可笑了。 |
| No Auto Margin Center Pseudo-Bug | IE8 ,IE7,IE6 | 如果把margins 设置成 `auto` ，IE不会把组件放置在中间的位置。所有的浏览器都会，只有IE不会。给block元素设置margin auto无法居中，出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上<!DOCTYPE html>就可以了。 |
| :first-line !important Rule Ignore Bug(:first-line/:first-letter里的!important会忽略) | IE8 | 如果在伪class :first-line 内使用!important，那么其所有定义会被忽略。 |
| :first-letter Ignore Bug | IE6 | 当:first-letter前面有逗号的时候ie6会忽略这条规则，解决方法是将:first-letter放到最后。 |
| :first-letter !important Rule Ignore Bug | IE8 | 如果在伪class :first-letter内使用!important，那么其所有定义会被忽略。 |
| Partial Click Bug v2 | E7,IE6 | 设置了整个区域是可以点击的，但在IE中只有文本可以点击。 |
| Staircase Bug | E7,IE6 | 浮动的元素排序起来就像一个楼梯。 |
| Disappearing List Background Bug | IE6 | B <li>, <dt>, <dd> 没有背景。 |
| noscript Ghost Bug | IE8,IE7,IE6 | <noscript> 标识中只有 borders/background 才有用。 |
| No Transparency Click Bug (透明区域无法点击bug) | IE8,IE7,IE6 | 背景透明的图片在作为链接时，并且其“filter”被设置成了PNG透明，但其背景还是不可点击。 |
| List Drop Shift Bug (List标记偏移) | IE8 | 在<li>中的内容被换行了。 当给list里面的元素设置display和overflow属性后List标记会偏移，解决方法是给里面的元素加一个float:right; width:100%;可以使用ie的条件注释针对ie8 |
| No Increase on <ol> Numbers Bug (ol数字标记不自增) | IE7,IE6 | <ol> 中的 <li> 列表序号不会增加。 当给li设置宽度时会触发这个bug，解决方法是给li设置display:list-item . |
| No Bullets on <ul> and <ol> Bug (ul/ol标记消失bug) | IE7,IE6 | 在<ul> 和 <ol> 中看不到列表序号/数字了。 当ul/ol触发了layout并且有margin-left会触发这个bug，解决方案是给li设置margin-left . |
| No line-height Vertical Center on Images Bug (图片不垂直居中) | IE7,IE6 | 图片使用line-height 方法不能垂直居中. 当使用line-height来居中图片时在ie6/7下不会生效，解决方法是在img后加一个空白元素如<span></span>. |
| No Background Image Bug (没有背景图片bug) | IE8,IE7,IE6 | 在IE中使用background无法定义背景图. 当使用background的时候如果在url()后没有加空格背景图片就不会显示。 |
| Custom Cursor Bug (自定义鼠标bug) | IE8,IE7,IE6 | 自定义鼠标不工作. 当自定义鼠标样式的时候，如果url()里面的路径是相对路径的话，ie会认为相对于当前文档而不会出现鼠标样式的图片，解决方法是采用绝对路径。 |
| Leaking Background Bug (背景溢出bug) | IE6 | 背景从一个元件的内部溢出到外部. 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug，解决方案就是建议尽量不要通过增加一个 clear:both的div来清除浮动，可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1；来触发ie的 layout |
| Expanding Height Bug (高度扩展bug) | IE6 | 元件的高度比指定的要长得多。 当高度很窄如小于12px时ie6会扩展高度，解决方法是设置overlfow:hidden或font-size:0; |
| Expanding Width Bug (宽度扩展bug) | IE6 | 元件的宽度比指定的要长得多。 当连续英文字符的时候设定宽度不起作用，解决方法是设置overflow:hidden或word-wrap:break-word; |
| Double Margin Bug (浮动双margin) | IE6 | float元件的左和右的空白（margins）被加倍了。 当给一个浮动元素设置margin-left或margin-right时margin加倍，解决方法是加上一条display:inline; |
| Negative Margin Bug (负margin bug) | IE7,IE6 | 如果使用负数来指定页白（margins）里面的元件会被外面的元件所遮挡。 当给一个有layout容器里面的元素设置负marin时内容会被截断，解决方法是不让容器有layout或者给负marin的元素设置position:relative;zoom:1; |
| Italics Float Bug | IE6 | float的元件中的字体会被设置成倾斜。 |
| 3px Gap Bug aka Text Jog Bug (3px间距bug) | IE6 | 下一个float的元件不是有一个3px的空隙，就是被换行了。 当几个连续浮动且有layout的元素排列时会有3px的间距，解决方法就是给这些元素设置3px的负margin或加上overflow:hidden; |
| Text-Align Bug | IE7,IE6 | text-align属性会影响整个元件内的所有内容。 当容器外面设置了text-align，如果容器里面有文本和其他block的元素, block的元素也会继承text-align，这是不正确的，解决方法是重新写出合理的有语义的markup，如文本外面加一个p. |
IE的CSS Bug：布局类 Bug
| 解决方法名称 | IE的版本 | 描述 |
|---|---|---|
| Scared of Floats Bug | IE7, IE6 | elements with layout clear floats instead of going around floated elements |
| Border Chaos Bug | IE6 | 连框显示是混乱的 |
| Sub-Hover Bug | IE6 | 一些selectors 如 a:hover foo{} 无法正常工作 |
| Partial Click Bug | IE6 | 在定义了display: block的链接中(<a>) 只有文本是可以点的。 |
| Disappearing Content Bug | IE6 | 当我们滚动窗口的时候，或是最大化最小化窗品的时候，有一些内容会重复显示。 |
IE的CSS Bug：不支持的功能
| 解决方法名称 | IE的版本 | 描述 |
|---|---|---|
| No Child Selector Support Workaround | IE6 | 子 selector 将被忽略 |
| Max-Height Workaround | IE6 | max-height 不支持 |
| Max-Width Workaround | IE6 | max-width 不支持 |
| Opacity | IE8，IE7,IE6 | opacity 属性不支持 |
| Min-Width Workaround | IE6 | min-width 属性不支持 |
| Min-Height Workaround | IE6 | min-height 属性将被忽略 |
IE的CSS Bug：程序崩溃 Bug
这个BUG可以导致整个 IE 崩溃.
| 解决方法名称 | IE的版本 | 描述 |
|---|---|---|
| Hover Crash Bug | IE6 | 当你把鼠标移上 :hover 的链接时，浏览器会崩溃。 |
原英文来源：http://haslayout.net/css/
中文译文来源：http://coolshell.cn/?p=1245
IE CSS Bugs 列表和解决方法的更多相关文章
- 浏览器css bug及bug解决方法
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- IE6/7/8 CSS兼容性问题和解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- css Margin-top塌陷，解决方法
在两个盒子嵌套时,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下: (1)外部盒子设置一个边框 (2)外部盒子设置overflow:h ...
- CSS布局自适应高度解决方法
这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...
- bugs开发异常解决方法
1. 前提 第一层:遇到异常首先必须告诉自己,冷静,不要慌.(一看到Bug就心慌,那么就不能释放必杀技) 2. 入门级 第二层:遇到Bug,第一潜意识看输出异常的信息的(控制台输出 ...
- ASP.NET中使用 Response.Write("<script>alert('****');</script>");后CSS界面发生变化的解决方法 （经验证）
在后台使用Response.Write("<script>alert('Hello World');</script>);弹出alert窗口后发现网页的界面和原来CS ...
- asp.net net::ERR_ABORTED 500 (Internal Server Error) 无法加载JS CSS等文件的解决方法
网站换服务器,部署上去后打开首页,js .css等文件始终无法加载,经过排查,问题出现在web.config文件中. <defaultDocument> <files> < ...
- win7(iis7)无法加载运行CSS和图片的解决方法
今天刚刚在公司的电脑安装了window7并配置了iis7,打开网站户发现结构混乱,图片不显示,但是内容显示完全没有问题,也没有出错. 一开始以为是和IIS6的MIME一样,没有添加到相应项目的原因,但 ...
- eclipse中怎么调出左边项目列表，解决方法：主界面的最上面一栏的Window--ShowView--Project Explorer
主界面的最上面一栏的Window--ShowView--Project Explorer
随机推荐
- mysql别名的使用
在项目中遇到别名的问题,抽时间整理了一下 在sql中,合理的使用别名可以让sql更容易写并且提高可读性.别名使用 as 来表示,可以分为表别名和列别名. 别名应该是先定义后使用才对,所以首先要了解sq ...
- 从ELK到EFK演进
背景 作为中国最大的在线教育站点,目前沪江日志服务的用户包含网校,交易,金融,CCTalk 等多个部门的多个产品的日志搜索分析业务,每日产生的各类日志有好十几种,每天处理约10亿条(1TB)日志,热数 ...
- Linux 基本命令-----常用操作分类
Linux/Unix 命令格式: 命令名 [选项] [参数] 注:[]中的内容代表内容可以省略 例:$ ls $ ls -l #-l 是选项 开始符号: 文件名 或 文件夹名 .当前文件夹 ..上一级 ...
- Magicodes.Admin.Core开源框架总体介绍
框架说明 Magicodes.Admin.Core框架在ABP以及ASP.NET ZERO的基础上进行了封装和完善,目前基于.NET Core 2.0+(Framework版本),由于部分组件在.NE ...
- 常用的Python代码段
过滤列表 #filter out empty strings in a sting list list = [x for x in list if x.strip()!=''] 一行一行地读文件 wi ...
- jquery实现抽奖小游戏
在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...
- 你是如何自学 Python 的？
作为一名Python爱好者,我也想跟大家分享分享我自学Python的一些小经验.搬来你的小板凳,听听看吧.也许,你会很有收获,也许你也走上了自学Python的不归路.开讲啦~ 首先,你要有自信心,要明 ...
- pt-log-player
简介 pt-log-player是MySQL日志回放工具,在pt2.4中被去除,由percona-playback取代. 在2.1中还是保留,如果想使用的话,需要下载2.1版本的. 使用方法 pt-l ...
- springboot整合shiro
请大家在看本文之前,先了解如下知识点: 1.Shiro 是什么?怎么用? 2.Cas 是什么?怎么用? 3.最好有Spring基础 可以先看看这两篇文章,按照这2篇文章的内容做一遍: Spring B ...
- mybatis简单搭建
背景 闲来没事把mybatis再熟悉一下,可能之前自己搭过没有记录.mybatis其实就是一个orm框架,在我们之前做.net工作的时候,我们的ef,dapper等都是这样的框架,java现在web流 ...