ie浏览器的css bug

最新推荐文章于 2021-08-03 21:48:28 发布

转载最新推荐文章于 2021-08-03 21:48:28 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yetj/p/7245533.html

本文列举了Internet Explorer浏览器中常见的CSS渲染问题，包括IE6至IE8版本中的各种布局、浮动、边距等CSS相关的问题及具体表现。

普通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
haslayout IE css bug

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

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

bug名称	影响版本	描述
不支持子选择器方法	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不支持