云南龙网

  1. 首页 > 云知道 > >

IE浏览器下的CSS问题小结( 二 )

云知道


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技巧:

推荐阅读


上一篇：沃尔沃属于什么车系

下一篇：怎样让你大A的敏感信息保密