在开发中我们常会在ie中遇到很多莫名的bug,尤其是ie6这个早就该退出历史的浏览器。刚刚在haslayout.net上看到有总结ie的一些 bug,分享一下。
1.图片label bug,影响版本ie6/ie7/ie8,当label中有img的时候无法触发点击选中form元素事件.
demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html
fix demo http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html
解决方案:通过给<label>内加入一个空的span标签,然后设置 position:absolute;background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了
2.设置margin auto的button没有居中,影响版本ie8,ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin-left: auto; margin-right: auto; }如果不设置宽度的话无法居中。
demo http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html
解决方案:可以给button加上宽度,或是通过js,var buttons = document.getElementsByTagName(’button’); for ( var i = 0; i < buttons.length; i++ ) {
buttons[i].style.width = buttons[i].offsetWidth + ‘px’;
}
另一种解决方案:
+展开
-HTML
<form action=”">
<div>
<button>This button should be centered</button>
<div class=”ie_fix”>
<input type=”button” value=”This button should be centered”>
</div>
<input type=”text”>
<input type=”checkbox”>
<input type=”radio”>
<div class=”ie_fix”>
<input type=”submit” value=”This button should be centered”>
</div>
<input type=”file”>
<select><option>test</option></select>
</div>
</form>
button, select, input {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.ie_fix {
text-align: center;
}
.ie_fix input[type="submit"],
.ie_fix input[type="button"] {
display: inline-block;
}
<!–[if IE 8]>
<style type=”text/css”>
button { display: table; }
</style>
<![endif]–>
给 input[type="button"] input[type="submit"]加上一个额外的标签,并设置display:inline-block;
并通过条件注释给ie8下设置button display:table;
3.不正确的浮动伸展布局,影响版本ie6/ie7,连续浮动的元素并且设置clear属性没法自动伸展
demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Demo.html
fix demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Fixed-Demo.html
解决方法:给连续浮动元素加一个span然后设置display:inline-block和display:block
4.文档滚动bug,影响版本ie6/ie7,不在html标签上设置overflow或许会影响到body上面的overflow
具体请看http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
5.连续浮动元素bug,影响版本ie6/ie7,http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug
6.连续浮动字符出现重复字符,影响版本ie6/ie7,[url]http://haslayout.net/css/Float-Squeeze- Duplicate-Last-Character-Bug[/url]
这个和5的解决方案都差不多,5是通过加一个宽度,而这个是通过给浮动字符加一个position:relative;
7.空元素高度bug,影响版本ie6/ie7,有layout的空元素获得了高度
+展开
-HTML
<div></div>
<style>
div
{
background: blue;
width: 100%; /* to give “layout” */
}</style>
解决办法:
+展开
-CSS
div {
height: 0;
overflow: hidden;
background: blue;
width: 100%; /* this is just what we originaly had as “layout” giver */
}
8.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin
具体请看http: //haslayout.net/css/Form-Control-Double-Margin-Bug
9.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后,有一个边框的宽度大于1px
的话其它为1px边框会变为dashed的样式,具体请看http://haslayout.net/css/IE7-1px-Dotted-Border-Appears-As-Dashed-Bug
10.overflow bug,影响版本ie6/ie7,当设置了overflow:hidden或auto的元素,如果子元素设置了相对定位,overflow就不起作用了,
表现的是visible的样式,解决方法是给父元素加一个position:relative;
11.ie7的坏的:hover 绝对定位bug,影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显
示位置时将会不起作用如果他们不再父元素的可视范围内,解决方法是给其加上margin-left:0%;
12.当:active时Button背景偏移,影响版本ie8,给button设置:active时背景会做偏移,可以通过设置:active时的 -ms-background-position-x和-ms-background-position-y来改变这个偏移。
13.:hover边框消失bug,影响版本ie8, 当设置了outline的元素后,再设置:hover的时候,如果设置边框的话,将会不显示
14.百分比padding垂直margin bug,影响版本ie8,当父元素设置了百分比的padding,子元素有垂直的margin的时候,
就好像父元素被设置了margin一样,解决方法是给父元素加一个overflow:hidden/auto
15.图片浮动List标记错位bug,影响版本IE8, 当List里面有浮动的image时,List标记显示的位置跑在里面了,可以通过使用背景图片代替List自带的标记来解决。
16.TH没有继承Text-Align属性的bug,影响版本IE8,当给table设置text-align时,TH没有继承样式,可以通过给TH设 置text-align:inherit;来解决IE8下这个丑陋的bug。
17.32个Style限制,影响版本ie6/7/8, 在32个”style”方法(style, link, @import)后浏览器会忽略后面的样式
18.白色背景hover bug,影响版本ie7, 给hover设置background-color:#ffffff;时,背景不会改变,解决方法是设置background:#ffffff;
19.* html bug,影响版本ie6,* html [selector]在ie6下通常不会被忽略,这个bug通常被用来作IE6的hack使用。
20.!important bug, 影响版本ie6, 在important之后设置同样的规则后important会被忽略,这个bug也常被用来指定ie6的样式。
21.png图片和背景颜色不一致,影响版本ie6/7/8, 设置背景颜色和png图片背景同样的颜色代码最后表现不一致,原来是因为ie支持“PNG Gamma profiles”,解决方案是通过一个pngcrush程序来优化图片。
22.auto margin居中bug, 影响版本ie6/7/8, 给block元素设置margin auto无法居中,出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上<!DOCTYPE html>就可以了。
23.:first-line/:first-letter里的!important会忽略,影响版本ie8, 在:first-line/:first-letter里应用!important的规则会被忽略,解决方法就是不用!important
24.:first-letter被忽略的bug, 影响版本ie6, 当:first-letter前面有逗号的时候ie6会忽略这条规则,解决方法是将:first-letter放到最后。
25.浮动元素的阶梯bug, 影响版本ie6/7, 当给一系列<li>里面的浮动元素设置font-size后会出现阶梯效果,解决方案是给li设置display:inline;
26.List背景消失bug, 影响版本ie6, 当给浮动的div里面的dt, dd, dl设置背景时不显示,解决方案是给dt, dd, dl加上position:relative;
27.noscript样式bug, 影响版本ie6/7/8, 当js可用的时候如果给noscript设置border和背景都可以显示,解决方法就是通过给noscript设置display:none;
28.透明区域无法点击bug, 影响版本ie6/7/8,当给一个display:block元素使用filter来支持png透明的时候,透明区域无法点击,解决方法是不要使用 background:none;filter…,而是background:url(#);filter…
29.List标记偏移,影响版本ie8, 当给list里面的元素设置display和overflow属性后List标记会偏移,解决方法是给里面的元素加一个float:right; width:100%;可以使用ie的条件注释针对ie8
30.ol数字标记不自增, 影响版本ie6/7, 当给li设置宽度时会触发这个bug,解决方法是给li设置display:list-item
31.ul/ol标记消失bug, 影响版本ie6/7, 当ul/ol触发了layout并且有margin-left会触发这个bug,解决方案是给li设置margin-left
32.图片不垂直居中,影响版本ie6/7, 当使用line-height来居中图片时在ie6/7下不会生效,解决方法是在img后加一个空白元素如<span>< /span>
33.没有背景图片bug, 影响版本ie6/7/8, 当使用background的时候如果在url()后没有加空格背景图片就不会显示。
34.自定义鼠标bug, 影响版本ie6/7/8, 当自定义鼠标样式的时候,如果url()里面的路径是相对路径的话,ie会认为相对于当前文档而不会出现鼠标样式的图片,解决方法是采用绝对路径。
35.背景溢出bug, 影响版本ie6, 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug,解决方案就是建议尽量不要通过增加一个 clear:both的div来清除浮动,可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1;来触发ie的 layout
36.高度扩展bug, 影响版本ie6, 当高度很窄如小于12px时ie6会扩展高度,解决方法是设置overlfow:hidden或font-size:0;
37.宽度扩展bug, 影响版本ie6, 当连续英文字符的时候设定宽度不起作用,解决方法是设置overflow:hidden或word-wrap:break-word;
38.浮动双margin,影响版本ie6, 当给一个浮动元素设置margin-left或margin-right时margin加倍,解决方法是加上一条display:inline;
39.负margin bug, 影响版本ie6/7, 当给一个有layout容器里面的元素设置负marin时内容会被截断,解决方法是不让容器有layout或者给负marin的元素设置 position:relative;zoom:1;
40.3px间距bug, 影响版本ie6, 当几个连续浮动且有layout的元素排列时会有3px的间距,解决方法就是给这些元素设置3px的负margin或加上 overflow:hidden;
41.text-align bug, 影响版本ie6/7, 当容器外面设置了text-align,如果容器里面有文本和其他block的元素, block的元素也会继承text-align,这是不正确的,解决方法是重新写出合理的有语义的markup,如文本外面加一个p.
来源:http://hi.baidu.com/%B3%E6%B5%C4%B4%AB%C8%CB/blog/item/e81956e91695ba33b80e2dce.html
分享到:
相关推荐
文件命名也应清晰反映其包含的样式,如`base.css`、`layout.css`。 十二、IE与Firefox的CSS兼容问题 1. 字体渲染:IE可能对某些字体有不同解析,可以使用`font-family`指定多种字体作为备选。 2. 盒模型差异:IE6和...
##### 2.6 DIV浮动IE文本产生3像素的bug **问题描述**:当左边的对象浮动后,右边的对象内的文本可能会出现3像素的间距问题。 **解决方案**: - 通过调整左边对象的`margin-right`属性来解决。 **示例代码**: ```...
- **IE5-6/win的3像素偏移bug**:元素在垂直方向上有3像素的偏移。使用`_height: 1%;`(私有属性)可以修复。 - **E6的躲躲猫bug(peek-a-boo bug)**:元素的高度计算不正确,导致内容显示不全。同样通过`_height: ...
IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念。 因为布局是专门针对显示引擎内部工作方式的概念,所以一般情况下不需要了解它。但是,布局问题是许多IE显示bug的根源,所以...
- **问题描述**:设置为`float`的div在IE下设置的`margin`会加倍,这是IE6中存在的一个bug。 - **解决方案**:可以在该div内部添加`display: inline;`。例如: ```html ... ``` 相应的CSS为: ```css ...
本文将详细探讨由IE浏览器特有的hasLayout属性引发的CSS Bug表,涉及的知识点包括hasLayout的定义、特点、触发条件以及具体的Bug案例和解决方案。为了便于理解,我们将分几个部分阐述这些知识点。 首先,hasLayout...
本部分文档是关于CSS布局中的浮动(float)属性的教程,以及不同浏览器对浮动元素的处理差异的说明,包括如何解决IE浏览器中的布局问题。 首先,需要明确浮动是一种CSS定位属性,可以让元素脱离常规的文档流布局,向...
【Akira_IE104.L11.CNCL】是一个可能与网络浏览器兼容性相关的主题,特别是关于Internet Explorer 10的。在这个上下文中,"CNCL"可能指的是取消(cancellation)或中国(China)的简写,暗示可能涉及特定地区的...
本资源摘要信息详细介绍了浏览器兼容性问题的解决方案,涵盖了CSS技巧、浏览器bug、DIV浮动、IE兼容性问题等多个方面。 一、 兼容性问题:CSS 技巧 1. div 的垂直居中问题:使用vertical-align:middle;将行距增加...
本次更新内容主要是BUG修复和功能改进,相隔4个月又发布了新版本,这次更新更像是例行公事,不过好在修复了很多BUG,另外需要说一下,EasyUI框架当中其实官方还隐藏了不少API没有开放出来,有些朋友建议我把整理一下...
这是一个IE6都存在的bug。解决方案是在这个div里面加上`display:inline;`。 3. 浮动 IE 产生的双倍距离 在IE下,浮动元素会产生双倍距离的问题。解决方案是使用`display:inline;`使浮动忽略。 4. IE 与宽度和高度...
IE6中的元素如果拥有布局(layout),则会触发其内部的Bug,使得元素的高度表现为min-height的效果。可以通过设置一个非零的_min-height来实现这一点。由于IE6不支持min-height属性,所以这里的设置不会影响其他...
什么是Haslayout? 顾名思义,它的意思就是 — has layout,是IE下的特有属性,通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar... IE浏览器下的很多bug都是haslayout =
myBase Desktop 6.0.7, 2/3/2012 完美破解~ IE 插件 webcollect 1.9 最新版 已破解 ,请另行...5.Fixed: a bug about the AtlGr key combinations not working with the French keyboard layout. 6.Minor changes.
相隔4个多月EasyUI又更新了,这次主要是修改BUG和功能改进,有1...layout:允许用户覆盖“cls”、“headerCls”和“bodyCls”属性值。 New Plugin(新组件) switchbutton:新增开关按钮组件,状态:“开”和“关”。
- 0000685: UniDBGrid: Ellipsis in first column bug (IE) - 0000690: UniDBGrid: OnTitleClick event - 0000684: UniEdit: Text alignment - 0000683: UniScreenMask bug with Maximized Form and mfPage set - ...
##### 3.6 DIV浮动IE文本产生3像素的bug 在IE中,当左侧对象浮动时,右侧对象内的文本可能会与左侧对象之间出现3像素的间隙。解决方法如下: ```css #box { float: left; width: 800px; } #left { float: left; ...