44种IE css bug实例测试总结

web前端,我们可以把它理解成浏览器端。从这种意义上来讲,开发者日常工作跟浏览器关系是相对紧密的;

我们今天要探讨的问题,就是关于浏览器中的另类(当然开发人员是这么认为的)—IE 对CSS解释和渲染上的一些bug,以及对这些bug的解决方案。

当然你会说,ie的CSS bug咱都给haslayout属性来解决不就完了;您这就有点儿太低估ie的“能力”了;不否认在接下来的实例中,确实有的bug是haslayout属性造成的,但不是全部。

以下的44个bug及解决方案实例是从一篇老外的博文上翻译过来的(其实这博客地址已经在我的收藏夹呆了快一年)了,之所以这次抽时间来翻译它,也是因为最近项目中出现的N多问题,我发现都能从这里找到;其实早前在豆丁网上看到有人翻译过(只是对BUG list做了简单的翻译,而实例却没有),我想自己亲自来做一变实例测试,对自己还是有很大好处的,而且也想把这个拿出来分享。

注意:

  1. 以下关于ie 的CSS bug在我注明的测试日之前是一直存在的(吼吼。。以后的事儿谁也不知道);
  2. 关于bug的解决方案在我注明测试日之前是有效的。
  3. 查看bug请点击bug Name 相关链接,查看解决方案请点击”GO”;

说明:如果您觉得看英文比较爽,请猛点这里查看原文(http://haslayout.net/css/实例LIST>>

General Internet Explorer  CSS Bugs
Bug Name 影响版本 解决方案 bug描述
>label标签中有img标签 无法focus到表单元素 IE8, IE7, IE6 Go 当img标签包含在label标签中,点击img标签时,无法触发form元素选中事件
>button元素 不会自动居中 IE8 GoGo2 Button元素和input元素如:type=submit,type=button,type=reset and so on,当应用{display:block;margin-left:auto;margin :auto;}属性时,是不起作用的。
>错误的浮动布局 IE7, IE6 Go 连续N个浮动元素且有clear属性时,显示出错误的排版(宽度没有自适应)
>页面滚动Bug IE7, IE6 Go 非常怪异的溢出,看代码
>连续浮动元素Bug IE7, IE6 Go 在连续浮动元素中,最后一个与倒数第2个元素间会出现一段留白。
>连续浮动元素会重复出现最后一个元素的Bug IE7, IE6 Go 在连续浮动元素中,最后一个元素是重复的。
>空标签会有height值 IE7, IE6 Go 拥有layout属性的空标签会有height值
>表单元素双margin值 IE7, IE6 Go input textarea元素在水平方向的margin值会继承父级元素的margin和“layout”
>边框dotted属性值等同dashed属性值ie7 IE7 Go 当元素某边应用{1px dotted}属性且至少有一边的宽度大于1px时,dotted会出现dashed效果
>relative属性overflow失效 IE7, IE6 Go 当子元素设置position为relative的时候,父元素的overflow属性值hidden与auto均失效
>IE7 “Broken” :hover Absolute Bug IE7 Go 当子元素设置position为relative的时候,父元素的overflow属性值hidden与auto均失效
>Button Background Shift On :active Bug IE8 Go :active时背景偏移当在button input type=”submit”标签应用:active状态时 背景偏上及偏下
>Invisible Hover Border Bug IE8 Go hover时边框隐藏元素设置了outline属性,当:hover状态时,bottom边框会完全不显示或少1px;
>Percentage Padding Margin Bug IE8 Go 元素垂直方向设置margin值,且父元素设置了padding值为百分比以及父元素的父级设置了border或padding属性是,产生的bug,且看实例:
>图片浮动list标记bug IE8 Go 当list有浮动图片是list标记位置错误或根本不显示
>TH标签没有继承text-align属性bug IE8 Go TH元素不会继承来自其父元素的text-align的属性值
>32个style限制 IE8, IE7, IE6 Go 页面中style标签大于等于32个时,第32个及之后的style都将被忽略(当然包括 @import这种形式外链的样式表)
>hover状态下白色背景忽略bug IE7 Go :hover时背景不会改变
>ie7下子选择器注释bug IE7 Go 在注释后包含有子选择器的选择器会被忽视;
>使用*HTML bug IE6 Go * HTML选择器ie6是能识别的
>ie6忽略!important bug IE6 Go 当我们在CSS规则后面加上!important 关键字时,ie6是不能识别的;
>PNG背景与背景颜色不匹配 IE8, IE7, IE6 Go 元素应用PNG背景图片与背景颜色,且PNG图片的颜色与背景颜色值相同,但ie表现bug
>margin值为auto无法居中 暂且叫伪bug IE8, IE7, IE6 Go 给块级元素设置margin值为auto时没法居中
>:first-line !important规则无用 IE8 Go 当应用:first-line伪类,且有!important规则是,在ie8下是无法正常显示的
>:first-letter忽视bug IE6 Go 此bug是由一个有趣的原因引起;
>不完全的点击bug IE7, IE6 Go a元素仅仅在有文字的地方才能点击,且:hover效果也只有鼠标移动到文字上才会出现
>浮动元素阶梯状bug IE7, IE6 Go 浮动元素像楼梯状排列在一起
>列表背景消失bug IE6 Go li,dt,dd元素背景不显示
>noscript标签背景与边框bug IE8, IE7, IE6 Go noscript元素只有在浏览器禁用script时才会出现,但在ie浏览器却非全是如此;
>透明区域无法点击bug IE8, IE7, IE6 Go 用PNG图片做背景时,a标签的透明区域无法点击;
>list位置偏移bug IE8 Go 在ie8中,我们看到list与标记向下偏移
>ol列表数没有增加bug IE7, IE6 Go 在ie6 7中我们无法看到ol列表数增加,而始终是1,不会发生变化
>ul与ol列表编号与符号隐藏bug IE7, IE6 Go 在ie6 7中我们无法看到ol与ul列表数与图标;
>无法让图片垂直居中 IE7, IE6 Go 给元素使用line-height方法无法让内部图片垂直居中显示;
>背景图片不显示 IE8, IE7, IE6 Go background 属性应用时在ie中背景图片不显示
>自定义鼠标bug IE8, IE7, IE6 Go 自定义鼠标在ie中不显示
>背景溢出bug IE6 Go 背景色会从一个元素溢出到与他下面相邻的元素里
>高度扩大Bug IE6 GoGo 元素自身的高度大于对其定义的高度(此高度值很小)
>宽度度扩大Bug IE6 Go 元素自身的高度大于对其定义的宽度(英文状态下)
>双边距bug IE6 Go 浮动元素产生双倍的左右边距
>负边距bug IE7, IE6 Go 当元素定义了负边距时,超出父元素部分会被隐藏掉;
>斜体字浮动bug IE6 Go 浮动元素字体为斜体时,与其相邻的浮动元素会被挤下;
>3px间隙bug IE6 Go 浮动元素相邻的元素或者有3px的间隙,或者向下移动了位置
>Text-Align Bug IE7, IE6 Go text-align属性影响块级元素

原文地址:http://ued.iciba.com/?p=401&cpage=1

你可能感兴趣的:(css)