IE6实现min-width

2016-02-19 11:57 5 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的IE6实现min-width,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】


首先我们知道这个效果应该是一个老话题了。
今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧
需要说明的是有幸也见到过CSSPLAY的老工程师站长对这个效果的实现,而且肯定是很早就给出来了。
闲话少说,上源码:
触发并利用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 全部选择 提示:你可先修改部分代码,再按运行]
扩展演示:
运行代码框

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
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
演示:
运行代码框

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
以上两种解决方法在IE6-的标准模式下和quirk模式下都可实现,IE Expression在这个应用中也未发现CPU效率问题。

来源:http://www.tulaoshi.com/n/20160219/1599273.html

延伸阅读
标签: Web开发
效果地址: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlefixed ie6/titlest...
标签: Web开发
js用来区别IE与其他浏览器及IE6-8之间的方法。 1、document.all 2、!!window.ActiveXObject; 使用方法如下: if (document.all){ alert(IE浏览器); }else{ alert(非IE浏览器); } if (!!window.ActiveXObject){ alert(IE浏览器); }else{ alert(非IE浏览器); } 下面是区别IE6、IE7、IE8之间的方法: var isIE=!!window.ActiveXObject; v...
标签: Web开发
在一个典型的浮动中,如下面的图片所示:灰色矩形是外部容器,绿色容器在外部容器内向左浮动,未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时,会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观,让我们将Firefox和IE6中的效果做一对比(上图是Firefox中的效果,下图是IE6中的效果): 你会清晰的观察...
标签: Web开发
区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; 注:IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,但不能识别 ...
标签: Web开发
本文为转载,是一个网友在实际工作中遇到的问题,在此52CSS转载过来,大家在遇到此类问题时,可以有一定经验。 又是IE6,又是编码,说来说去都是这些问题。今天在做一个网页的时候发现 IE6 版本以下的浏览器不能把CSS正确地表现出来,CSS 好像没有产生任何作用!而 IE7 、Opera9 和 Firefox2&nbs...

经验教程

875

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部