IE浏览器下的CSS问题小结

IE下的特殊情况 下面是14条特殊情况你看一下是哪个问题出错了这些仅供参考： 1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。 2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。 3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。 小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。 a.div style=border:1px solid red;height:10px/div b. div style=border:1px solid red;width:10px/div c. div style=border:1px solid red;float:left/div d. div style=border:1px solid red;overflow:hidden/div 上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，div style=height:10px;overflow:hidden/div，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。 4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。 5.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。 引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。 6. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。 7.注释也能产生bug~~~多出来的一只猪。这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用![if !IE] picRotate start ![endif]方法写注释。 8.img 下的留白，大家看这段代码有啥问题： div img src= mce_src= / /div 把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写 div img src= mce_src= //div 后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。 9. 失去line-height。div style=line-height:20pximg /文字/div，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是img /这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。 引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。 10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效 div style=background:red;float:left;dd/div div style=clear:both;margin-top:18px;background:greenff/div 11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案：给overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。 12.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。 13.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。 14.width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。 ie的float bug(ie6,ie7)使前端工程师们为之困扰,最常见的现象就是:当浮动元素的父级元素在拖动滚动条的时候出现边框的缺失,对于此类问题的解决方案就是使浮动元素获得布局. 在诸多的情况中,因为页面需要宽度自由伸缩而不能申明宽度为固定值,但我们可以设置*height:1%;,*在这里可谓是举足轻重,因为*只能被ie7及以下版本解析,ie8并不识别此类写法,所以可以使用这个写法来区别ie8和其他版本号的ie浏览器.对网上流行的ie8 beta1的hack,也算是一个补充. 一些常用的hack测试 * html p {color:red;} 支持 IE6 不支持FF IE7 IE8b *+html p {color:red;} 支持 IE7 IE8b 不支持FF IE6 p {*color:red;} 支持 IE7 IE6 不支持FF IE8b IE8 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似： E[att^=val] //子串以val 开始 E[att$=val] //子串以val 结束 E[att*=val] //子串中包含val IE8 支持绝大多数基本的 CSS2.1 选择器，不支持的包括但不限于：[:first-line] 、[:first-letter]。 对于 CSS2.1 中的 generated content 部分，即通过使用伪元素 :before 和 :after 添加文本内容，IE8 中支持 并未完全 。 而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ，IE8 中依旧没有支持。 对于原来用来区分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。 原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。 原有 IE 的 z-index bug 在 IE8 中依旧存在。 IE8 中产生新的 bug：当 line-heigth 小于正常值时，超出的部分将被裁切掉。 IE8 中依然不支持 display:table 。 IE8 中依然不支持 border 的 transparent 值。 IE8 中 @import 只支持三层嵌套。 IE8中 border的 transparent 不被支持 IE8中产生新的BUG：line-heigth BUG 　只针对IE8的hack，可以是属性也可以是类 BUG描述： 页面中某DIV使用了position:relative，结合top=-25px等元素定位。在FF和IE7下表现正常，但是在IE6中该DIV会随鼠标滚动而滚动。 分析： 这是IE6一个已知的BUG：当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时，会表现出postion:absolute的行为。 解决方法： 1.为包含块元素添加属性position:relative 。 2.把该元素的position:relative属性去掉，使用默认的static定位，并通过margin-top等属性实现类似的效果。 ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种 hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自www.sitepoint.com)中的10个修复ie6下bug技巧: 1. 使用DOCTYPE 你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd 或者，对于XHTML使用: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd 你需要处理的最棘手的事情就是IE6进入quirks模式它已经够诡异了。 2. 设置position: relative 将一个元素设置为position:relative可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需要非常小心点儿，因为绝对定位的子节点可能会因此重新定位。 3. 将浮动元素设置为display:inline 具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。display:inline将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。 4. 将一个元素设置为hasLayout 很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。 最简单的设置 hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用height:1%。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。 5. 修正重复文字bug 复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的： .确保所有的元素使用display:inline; .在最后一个元素上使用一个margin-right:-3px; .为浮动元素的最后一个条目使用一个条件注释，比如： !--[if !IE]Put your commentary in here...![endif]-- .在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。 你还可以访问positioniseverything.net 查看该问题的完整介绍。 6. 在可点击和悬停的元素上只使用a标签 IE6只认识对a标签的CSS hover效果。 你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是a标签比其它方案更可靠。 7. 使用!important 或高级选择器来区分IE6 不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义： 复制代码代码如下: #element { min-height: 20em; height: auto !important; height: 20em; #element[id] { height: auto; } 8. 避免百分比单位 百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如： body { margin: 2% 0 !important; margin: 20px 0; } 9. 尽早测试并不断测试 不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。 10. 重构你的代码 经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。 ------------------------------------------------------------------------------------------------------- 让IE6支持PNG格式的图片 用法： 先复制下面的代码在记事本中，然后另存为pngbehavior.htc（名字可以任意）： 复制代码代码如下: public:component lightWeight='true' public:attach event='onpropertychange' onevent='propertyChanged()' / public:attach event='onbeforeprint' onevent='beforePrint()' for='window'/ public:attach event='onafterprint' onevent='afterPrint()' for='window'/ script var supported = /MSIE ((5.5)|[6789])/.test(navigator.userAgent) navigator.platform == 'Win32'; var realSrc; var blankSrc = 'blank.gif'; var isPrinting = false; if (supported) fixImage(); function propertyChanged() { if (!supported || isPrinting) return; var pName = event.propertyName; if (pName != 'src') return; // if not set to blank if (!new RegExp(blankSrc).test(src)) fixImage(); }; function fixImage() { // get src var src = element.src; // check for real change if (src == realSrc /.png$/i.test(src)) { element.src = blankSrc; return; } if ( ! new RegExp(blankSrc).test(src)) { // backup old src realSrc = src; } // test for png if (/.png$/i.test(realSrc)) { // set blank image element.src = blankSrc; // set filter element.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.' + 'AlphaImageLoader(src=’' + src + '’,sizingMethod=’scale’)'; } else { // remove filter element.runtimeStyle.filter = ''; } } function beforePrint() { isPrinting = true; element.src = realSrc; element.runtimeStyle.filter = ''; realSrc = null; } function afterPrint() { isPrinting = false; fixImage(); } /script /public:component 最后在你的css文件里面加上这么一段代码： img {behavior: url(pngbehavior.htc);}