CSS expression在IE6的诡异问题
标题内容...
以上是最近的项目里的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的负担。