在IE6-的标准模式下和quirk模式下实现min-width

发布时间:2017-03-06 06:04 来源:互联网 当前栏目:web技术类

源码:

触发并利用IE6-layout的怪异特性,css实现:

复制代码 代码如下:

<style type="text/css">

.ie6-out{

       _margin-left:900px;

       _zoom:1;

}

.ie6-in{

       _position:relative;

       _float:left;

       _margin-left:-900px;

}

#min-width{

       min-width:900px;

       background:#ccc;

       line-height:200px;

       _zoom:1;

}

</style>

<div class="ie6-out">

  <div class="ie6-in">

    <div id="min-width">ie6-下,容器实现模拟min-width效果。请任意改变浏览器窗口大小,再点击按钮“查看宽度”。</div>

  </div>

</div>

css实现演示:

运行代码框


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

CSS Expression

——相信许多人在用这个方法实现容器最小宽度时都时常会被莫名其妙的死机所困扰,最后往往无果而终。

这里特别需要指出的是两点:

1. IE6-的标准模式下和quirk模式下代表视口的元素是不一样的,前者为<html>,后者则为<body>;

2. IE6-在以上两种不同的模式下,其对包含内容溢出时的不同表现形式,从而导致了赋值判断上的死循环。解释起来有些啰嗦,自己实践一下吧。

CSS Expression实现最小宽度源码:

复制代码 代码如下:

<style type="text/css">

body{ text-align:center;}

#min-width{

       min-width:900px;

       _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");

       line-height:200px;

       background:#ccc;

}

</style>

<div id="min-width">ie6-下,容器实现模拟min-width效果。请任意改变浏览器窗口大小,再点击按钮“查看宽度”。</div>
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、