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

2019-11-02 17:01:10

字体：大中小

来源：转载

供稿：网友

源码：

触发并利用IE6-layout的怪异特性，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 id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>

</div>

css实现演示：

运行代码框

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

CSS Expression

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

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

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

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

CSS Expression实现最小宽度源码：

复制代码代码如下:

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>

上一篇：非常不错的精挑细选网站关键词的相关技巧

下一篇：做网站要主要的百度分词技术

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注