浙江爱信诺前端规范

CSS规范 - 常见IEbug

css布局中常见IEbug总结
bug名称 影响版本 bug描述 解决方案
双边距 ie6 块状元素浮动产生双倍的左右边距 添加属性display:inline
最小高度 ie6 ie6下面元素设置小于14px高度时,元素的高度还是14px 添加属性overflow:hidden
3px间隙 ie6 浮动元素相邻的元素或者有3px的间隙,或者向下移动了位置 添加属性_margin-right:-3px;
使用滤镜png透明区域无法点击 ie6 用IE6滤镜使PNG图片透明做背景时,a标签的透明区域无法点击 1.a标签本身不要给背景,给其父元素添加背景,然后再给a标签 position:relative。2.a标签给个透明的gif背景
无法让图片垂直居中 ie6, ie7 给元素使用line-height方法无法让内部图片垂直居中显示 添加了一个额外的span标签,定义属性display:inline-display
背景溢出 ie6 背景色会从一个元素溢出到与他下面相邻的元素里 添加属性_zoom:1
高度扩大 ie6 元素自身的高度大于对其定义的高度(此高度值很小) 添加属性_overflow:hidden
负边距 ie6、ie7 当元素定义了负边距时,超出父元素部分会被隐藏掉 添加属性*zoom:1和*position:relative
button元素不会自动居中 ie8 button元素和input元素如:type=submit,type=button,type=reset,当应用{display:block;margin-left:auto;margin :auto;}属性时,是不起作用的。 用CSS指定按钮元素的宽度
错误的浮动布局 ie6, ie7 连续N个浮动元素且有clear属性时,显示出错误的排版(宽度没有自适应) 在clear元素前面增加一个块状元素
label标签中有img标签 无法focus到表单元素 ie6, ie7, ie8 当img标签包含在label标签中,点击img标签时,无法触发form元素选中事件 将图片用其他元素替代,然后将图片作为该元素的背景
连续浮动元素会重复出现最后一个元素的Bug ie6, ie7 在连续浮动元素中,最后一个元素是重复的。 浮动元素css样式 position:relative; 或者给个背景颜色
空标签width:100%会有height值 ie6, ie7 拥有layout属性的空标签设置width:100%会有height值 去掉width:100%
表单元素双margin值 ie6, ie7 input textarea元素在水平方向的margin值会继承父级元素的margin和“layout” 给input和textAera标签的margin值为-100px
relative属性overflow失效 ie6, ie7 当子元素设置position为relative的时候,父元素的overflow属性值hidden与auto均失效 给父标签加上position:relative
图片浮动list标记 ie8 当list有浮动图片是list标记位置错误或根本不显示 移除掉list原有的标记,用背景图片来替代
th标签没有继承text-align属性 ie8 th元素不会继承来自其父元素的text-align的属性值 给th元素添加属性text-align:inherit
hover状态下白色背景忽略 ie7 :hover时背景不会改变 将background-color属性改成background
注释bug ie6 应用/**/注释的页面的样式会不解析 把/**/改为/* */
margin值为auto无法居中 ie6 给块级元素设置margin值为auto时没法居中 再加一个父标签设置text-align:center
浮动元素阶梯状 ie6, ie7 浮动元素像楼梯状排列在一起 给浮动元素添加属性display:inline
列表背景消失 ie6 li,dt,dd元素背景不显示 设置属性_zoom:1
ol列表数没有增加 ie6, ie7 在ie6 7中我们无法看到ol列表数增加,而始终是1,不会发生变化 li元素设置属性display:list-item
斜体字浮动 ie6 浮动元素字体为斜体时,与其相邻的浮动元素会被挤下 添加属性_overflow:hidden