IE CSS bugs 集合

2013/07/14 1909点热度 0人点赞 0条评论

概述

  IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug。

  本页列举了IE下的一些问题,实例样本和一些我们已知的解决方法。

  尽管我已经尽力按照它们本来的性质对它们进行分类,仍有许多bug可以分在好几个部分之下,这种情况下,我将会将此bug分在普通bug这一部分。

统计

目前为止。此站点包含46个”普通bug”教程,5个”haslayout bug”教程,6个”不支持的方法”教程,一个“插图bug”教程。总共58个教程,70个解决方法。

  最近的教程发布于2009年8月19日 15:38:47 星期三

站点包含44个IE6 bug,28个IE7 bug以及19个IE8 bug。

注意版本

  在教程中你会看到诸如“影响:IE8和所有以下”或“修复:所有版本”。这里的“所有”意思是IE6,IE7和IE8。 IE5和IE5.5已经是历史了,本网站没有考虑这些版本的教程和解决方案的。

普通bug

此部分包含的是那些不能快速定位为其他部分或是可以同时归类到两部分或更多部分的bug。

  普通IE css bug

bug名称   影响版本 描述  
Image Label Focus Bug               IE8,IE7,IE6               <img>元素在<label>元素之内,单击时,焦点不会转移到相应的表单控件                
按钮Margin-Auto非居中               IE8               Button或类似元素并不居中当{ display: block; margin-left: auto; margin-right: auto;}作用与它 时候且“宽”是不明确的              
不正确的浮动收缩-包裹bug               IE7,IE6             一个浮动元素(设置了clear属性)在另一个浮动元素之后时不能正确的收缩-包裹              
overflow滚动条的不一致               IE7,IE6               非常规的在<html>元素上设置overflow属性可能会出现关于<body>元素的overflow bug              
浮动挤压怪异差距bug               IE7,IE6               倒数第一个和倒数第二个浮动元素的间距似乎垂直堆叠了              
浮动复制最后一个字符bug             IE7,IE6 浮动元素的最后一个字符被复制              
空元素高度bug             IE7,IE6               有”layout”属性的空元素获得高度              
表单控件的双边距bug               IE7,IE6               <input>和<textarea>元素上的水平margin“继承”于含有margin和layout属性的祖先              
IE7 1像素点边框表现为虚线边框               IE7               当至少有1边的变宽宽度大于1像素时,1像素的点边框表现为虚线边框              
Relative Overflow失效的bug               IE7,IE6               含有overflow(hidden或auto)属性的元素的后辈如果含有position:relative属性,则其表现得就像是设置为visible属性一样              
IE7 :hover“阻断”于absolute的bug               IE7               当绝对定位的子元素隐藏不可见的时候,使用:hover改变其left/top值貌似是不管用的。如果其可见,left/top也不会因:hover而改变              
Button按钮 :active时背景改变bug               IE8               当:active状态应用与<button>或<input type=”submit” />时背景会向上像左移动              
忽略:focus的bug               IE8               当一个包含:focus的选择器在另外一个简单的选择器之后,:focus是被忽略的。        
看不见的hover边框bug               IE8               当设置了outline,在:hover状态下,下边框要么没有完全显示,要么短了1像素(或是取消了outline)                
Padding/margin百分比bug               IE8               与百分比垂直padding特定组合,垂直margin间距似乎会出岔子,在父级的父级设置了padding或border的亦会如此              
图片浮动项目符号混乱bug               IE8             在项目列表中含有浮动属性的图片的时候,项目标记(或编号)位置不正确或是压根没有渲染出来              
TH标签text-align不继承的bug               IE8               祖辈的text-align值不会被TH元素继承下来              
样式文件32的数目限制bug               IE8,IE7,IE6               第32个及其以后的样式文件中的样式一概忽略(i.e. <style>, <link> 或 @import)                
白色背景hover无效bug               IE7               背景hover后转为白色背景无效              
IE7子选择器注释bug                 IE7               一个选择器如果包含子选择器,且在注释之后,是被忽略的              
星号 HTML bug               IE6                 * html选择器在IE6下不会被无视              
IE6 !important忽略bug               IE6               如果相当的规则再设置一次,则!important关键字将会被忽略                
PNG图片和背景色的不匹配               IE8,IE7,IE6                 尽管有相同的颜色代码,但是css中的指定的颜色与png图片是有差异的              
Auto Margin不居中的伪bug               IE8,IE7,IE6               block属性元素设置了两侧的margin auto不居中显示              
:first-line!important规则无效bug               IE8               当使用了!important修饰语后,:first-line内部的伪class完全不起作用              
:first-letter无效bug               IE6               全部的:first-letter规则集无效              
:first-letter!important无效bug               IE8               当使用了!important修饰语后,:first-letter内部的伪class完全不起作用            
部分可点击bug               IE6,IE7               只有文字是可点击的/有反应的,非得把鼠标移到真正的文字上才能有:hover反应,链接失效              
楼梯bug               IE6,IE7               浮动元素像梯子一样一个一个堆砌                
列表背景消失bug                   IE6                   <li>, <dt>, <dd>背景消失                
 noscript幽灵bug                 IE8,IE7,IE6                 脚本启用的时<noscript>元素显示,仅border/background从中显示                
透明无法点击的bug IE8,IE7,IE6 使用了filter滤镜修复png背景透明问题的时候背景图片的透明区域链接无法点击                
 列表内容下沉bug                 IE8                   <li>里面的内容在项目列表编号的下面                
<ol>数值不增加bug                 IE7,IE6                 <ol>中显示的数目不随着<li>增加              
<ol><ul>无编号bug                 IE7,IE6                 项目编号/数值从<ol><ul>元素那儿消失了                
line-height图片不垂直居中的bug IE7,IE6 使用line-height方法,图片不垂直居中                
没有背景图片bug                 IE8,IE7,IE6                 IE下使用了background背景图片,但是背景图片不显示(使用background缩写属性)
自定义光标bug                 IE8,IE7,IE6                 自定义光标在IE下不显示
背景泄露bug                 IE6                 背景溢出到跟随其后的其他元素上去了                
高度撑开的bug                 IE6                 元素的高度比指定的高度要长                
宽度撑开的bug                 IE6                 元素的宽度比指定的宽度要宽                
双边距bug                 IE6                 左边距或右边距在浮动元素上双倍                
负margin bug                 IE7,IE6                 当使用负margin时,容器之外的部分元素不可见
3px空白bug又称文本慢跑bug                 IE6                 靠近浮动元素的元素要么有3px的间距,要么位置偏下,或是保持偏移当几个元素依次浮动时                
Text-Align bug IE7,IE6               text-align属性影响block水平的元素                

                               Haslayout bug

有haslayout或没有haslayout导致的IE bug

bug名称   影响版本 描述
令人害怕的浮动bug                 IE7,IE6 haslayout的元素自动清除浮动代替包围浮动元素                
边框混乱bug                 IE6                 边框显示混乱。例如在不该的地方显示或丢失                
hover bug                 IE6                 选择器例如a:hover foo{}不起作用                
部分点击bug                 IE6                 样式为display:block<a>链接仅文字部分是可点击的,事实上在标准浏览器下还有额外的区域可点击
内容消失bug                 IE6 一些内容在页面滚动或浏览器最大化最小化的时候消失或重现                

            不支持的方法

各种各样的方法提供的属性效果和属性值在IE下是不执行的

方法名称   影响版本   描述
不支持子选择器方法                 IE6                 子选择器无效                
Max-width方法                 IE6                 max-width不支持                
Max-height方法                 IE6                 max-height不支持                
opacity                 IE8,IE7,IE6 透明度opacity不支持                
Min-width                 IE6                 min-width不支持                
Min-height                 IE6 min-height不支持                

yxkong

这个人很懒,什么都没留下

文章评论