CSS expression在IE6的诡异问题

<body><div id=”page-wrapper”><div id=”header”>标题内容…</div></div></body>

以上是最近的项目里的html结构,其中page-wrapper是自适应页面大小的,header是存放页面的标题(height:60px;)。根据客户的需要,该页面是自适应浏览器大小,并且有一个最小的宽度。于是我这么对page-wrapper这么写到

#page-wrapper{
position:relative;
min-width:974px;
width:expression(((document.compatMode && document.compatMode==’CSS1Compat’) ? document.documentElement.clientWidth : document.body.clientWidth) < 974 ? “974px” : “auto”);
}

鉴于IE6中没有min-width,所以我尝试使用一下css expression这个只有IE支持的CSS属性。里面是一段JS,当page-wrapper的宽度小于974px的时候把宽度设置成974px,以实现Ie6下的min-width。为什么会有个position:relative ? =.= 这个是手误,很久以前需要实现一些效果忘记删掉了。

于是问题就出来。该页面在IE6下当浏览器窗口最大化时page-wrapper里面所有的内容会消失,再缩小到原本大小的时候内容又出出现。囧rz

最后诊断的结果是 ,当 header的height:60px;与page-wrapper的position:relative;和css expression同时出现并且页面是自适应大小的话在IE6下便会出现最大化的时候页面内容消失的诡异问题。

这问题出现的必要条件也太恶心了。。。估计也没多少人能遇上。。。。

于是决定面壁思过。。远离肥猪流。。

#page-wrapper{
min-width:974px;
_width:expression(documentElement.clientWidth< 974 ? “974px” : “auto”);
}

(_width仅为IE6识别) 虽然很不想用CSS hack,但我认为这不失为一个便捷的方法。我不希望添加非IE6浏览器解析css的负担。

4 thoughts on “CSS expression在IE6的诡异问题”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据