|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
网页制造poluoluo文章简介:事物尽非完美无缺总有强差人意的一面,之前针对浮动剖析了其引发文本重影的奇异成绩,而作为浮动结构的最好伙伴定位结构也存在必定的缺点。
事物尽非完美无缺总有强差人意的一面,之前针对浮动剖析了其引发文本重影的奇异成绩,而作为浮动结构的最好伙伴定位结构也存在必定的缺点。
环绕着定位列出的各种成绩,对某些情形只是作出了剖析而临时没有找到有办理计划,但既然晓得成绩地点,我们能够尽量的接纳别的措施制止这征象。
- position:relative;属性值招致overflow:hidden;生效。
成绩:在IE6/7中子级设置position:relative;属性值后,招致父级的overflow:hidden;生效。Demo1
剖析:与定位的层级干系有关,IE6/7剖析为内容已跳出文档流,乃至父级误觉得没有包括内容。
办理计划:
关于IE6能够为父级增加定位属性改正成绩,但IE7仍然有效。
- overflow充任了position:relative的脚色
成绩:在IE6或IEquirks形式中设定overflow:auto/hidden/scroll属性值后,元素显现效果相称于position:relative的绝对定位效果。
Demo2
剖析:在奇异形式与尺度形式下的页面临CSS的剖析会有必定的差别乃至是歪曲了其属性的感化,对这征象临时还没有打破的才能,也只能纪录与躲避了。
- 没有实衬着招致相对定位的毛病
成绩:在IE6中,子级元素相对定位于父级元素时,当静态改动父级宽高时,子级地位没有产生变更。Demo3
剖析:估量是静态改动父级宽度时,IE6并没有及时对扫瞄器衬着。临时没有CSS能办理这成绩,但可实验利用JS对改动改模块高度举行革新办理这成绩。
- IE6中position:relative;属性值有效
成绩:在IE6及以下版本,父级元素已设置position:relative;属性值,但子级相对定位元素没有失效。Demo4
剖析:缘故原由在于父级元素没有触发haslayout(相干材料请搜刮Onhavinglayout),IE7及以上的初级扫瞄器则不存在这成绩。
办理计划:
在父级元素中增加让其触发haslayout的CSS属性值。
- 奇数引发定位的1pxBUG
成绩:在IE6及以下版本,父级元素宽度高度为奇数时,子级元素相对定位于(right:0;bottom:0;),会呈现往内偏移1px的毛病。Demo5
剖析:其真正缘故原由还得问IE6的开辟者了。但从例子中能够察看到左上角的子级元素显现一般,其缘故原由为“盒子”拉伸扩大为上至下左至右,估量于此以致靠右边或顶部的地位不会产生挪动的变更。
</p>
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 |
|