IE7中min-width引起的漂浮错误


11/25/06。  cathayan.org版权所有,保留一切权利。转载请保留此说明。谢绝商业转载。

把笔记本上的IE升级到了IE7,不想barb同学的Blog在里面显示有点怪异,显示日期的那一条竟然浮到了右边的菜单框上面。

本来这个布局也很简单,最大的框子叫contents,是整个网页的div;右边是menu框,float设定为right,宽度200;左边显示的内容没有再加float或是clear等属性,就直接放在contents里面,所以到menu结束的地方它会变成全宽。

在这种布局里,漂浮的menu框必然应该浮在最上面,而所有左边的元素都应该在它的下面。在IE6里是这样,在最新的Firefox和Opera里面也都是这样,只有IE7不行,把日期那行放到了漂浮框的上面,真是不可思议。

今天搞了个模拟页面测试,先把loose.dtd去掉,居然好了,但这样在Doctype里不加dtd,浏览器就进入Quirk模式,感觉不爽;于是想到必然是某处css不兼容ie7,一步步试,当删到Contents定义里面min-width的时候,终于搞定了。(原来是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">)

不知道为什么指定这个框的min-width属性会影响到一个漂浮框的显示;实际上测试中也根本不曾把窗口缩到那么小,会用到这个属性。再实际上,IE6那时也根本不支持这个属性,要想用还得想无数办法才行。

搜了一下,发现了Realazy的这篇文章,还发现了这篇如何对IE7进行Hack的方法。微软真厉害,好不容易做个新版,还是要人Hack :mrgreen: 先用着吧。

这个页面上可以换样式(换样式的地方在右栏偏下,搜索下面,叫“变脸”那里,实际上就是换CSS),有好几个CSS,目前还保留着Tulip那个没改,如果有IE7的可以去换成Tulip样式看看日期条浮在漂浮框上面的效果。

11/25/06 00:03:00,由cathayan发表。目录:电脑

Comments

Add Comments

This item is closed, it's not possible to add new comments to it or to vote on it

TrackBack