草根站长论坛's Archiver

深刻 发表于 2008-6-22 14:32

IE6实现min-width

首先我们知道这个效果应该是一个老话题了。
/_/_"P7L&t:Y 今天整理文件的时候，发现自己以前的一些布局的解决方法躺在文件夹里很长时间了，翻翻老底吧 q i/i]@gtfAK
需要说明的是有幸也见到过CSSPLAY的老工程师站长对这个效果的实现，而且肯定是很早就给出来了。
g%p~!ZNFw 闲话少说，上源码：`m$F2e3hK8g#S?M3f
触发并利用IE6-layout的怪异特性，css实现：C*j?m;[3t
[code] Q'Hj]W!n8n3B
style type="text/css">
3d^8~0U#nV(m .ie6-out{
L}&y/O1dx^q,a)l        _margin-left:900px;
'Ah\O V;XE9Y:G&oc;|        _zoom:1;tWDW d Qh;Yg,c
}3Bn,p$L hB!G%O3X
.ie6-in{
*e2U6P6D$P1n4A0H3m        _position:relative;
A9L)^0IX2Q        _float:left;$l1A.L7bU;ptg
       _margin-left:-900px;i%Fgay$g@7vQh
}
"jy6v-_'m$tFB3q$x #min-width{
O,h+z uA(_"w(n        min-width:900px;k9c3y`9cnvJ
       background:#ccc;
y opxlmE        line-height:200px;
+g$@*sa4Qsz&S        _zoom:1;
+Ls'r-L k_%M1U }/dp9O X7S
</style>[Ql9gJG+j5S&]
<div class="ie6-out">
n kO*L5g [v   <div class="ie6-in">&Ir(E1LJ cch"p]g
    <div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>V8pF~^b
  </div>
B&c"| t!v </div>
(a6CGhMX%^ [/code]
z'adv"b|'?5o css实现演示：9L#}]b&vjOk'm$P8h
运行代码框E Da!Q8U{
[code]<html xmlns="http://www.w3.org/1999/xhtml">
#qB;]w n.M @'a <head>njh&ZMY
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />|'n#\x8[WU
<title>CSS实现最小宽度</title>
4~ B cO(@I!w5? <style type="text/css">
cV Oz |vf body{ text-align:center;}
:y!Xa/]W;pi1R7c .ie6-out{
2THZ2k n(kZ"D ]8m _margin-left:900px;
FSz'i0Z| _zoom:1; J(^,i{+g Jr
}
A!o8e~Z .ie6-in{0`g-GL)qX'i S E
_position:relative;
k {5yP%A H _float:left;
c9lc&o8C w _margin-left:-900px;(ci!q X X
}
QC1B K'Stp #min-width{
2K|;}(~7xY min-width:900px;ZD5r;^!F;E4}
background:#ccc;N(h2m|%vAnkk.z
line-height:200px;
3G[J)re\2@ _zoom:1;
DY&P(]V }4B W6zBa6g*y
</style>
)S }0w+sN K </head>
iN7Xoz(r <body>E R f(A9_6?+K^
<div class="ie6-out">
4faKUg   <div class="ie6-in"> I:F3Mj:G:Ce
    <div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
0}+RW3~_+O(w0qF Y   </div>:m'I7KS4s.}(a/k
</div>
eGD-_ g <input name="" type="button" onclick="alert('容器宽度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'视口宽度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看宽度" />
*v nBzl-V%X U </body>%T uQ$H)Z0B#I
</html>[/code]"_$]#]2{;sM"{F`
扩展演示：.A7]1`9GOXC

M A9_)lf{ W\ vv} q;e&L*y)|QL7I#r[
[code]
:@y0sX9B@v <html xmlns="http://www.w3.org/1999/xhtml">
-GuT]#Y.a <head>8o4K2VR,R j;j/v
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />Q Q$h9M1p3zf[ CF
<title>CSS实现最小宽度</title>
BY S%F e#XN(L <style type="text/css">
Z4[d4RTOv'Uw_ body{ text-align:center;}
b X+W |n:Zm .ie6-out{
M6XV;JC5{#Q@ _margin-left:900px; LY/@1G,h NmB
_zoom:1;
zSIH\"F }
9Uko1v4c .ie6-in{[cTV6v"W
_position:relative;
Am oT#Q dtf _float:left;
gt,F3H+~ _margin-left:-900px;
?I$v*k4~x background:#f00; I[3i M!@2Og
line-height:200px;
|o"IrmO,PY*\ Q'SX }tu$P Mnkq
#min-width{
"t0oel1~I ]@ min-width:900px;
u3jN_"?Sz background:#ccc;
c$zp/i+K2E~ _zoom:1; d y&A fvv)\*E t6Y
},F Br!Bv,x\8M
</style>
Uyz8O"V0Y#NQ1L </head>
#m,x6rDz s6J9n*t <body>
~ ~0h.f4p_H kd <div class="ie6-out">\/uIe!Ze*zbs6T
  <div class="ie6-in">3PIhLbw
    aaw;\gO juG1x0p ]
  </div>
h-_$i3G?1J </div>#R.l!}*c8PB t
<div class="ie6-out">BT}~F-]
  <div class="ie6-in">
EGI+D!Ton;a0i&b[     aa<div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>'|4e!i[v7^ @
  </div>Q J{ j0u2k(qv&m;x2J
</div>
7tx?+xa$j4W <input name="" type="button" onclick="alert('容器宽度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'视口宽度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看宽度" />-vO4}ku1k bo
</body>
.Jy M.B)I7^_%Y </html>
/N`1v9Z;].y"?KV9m [/code]
"lD9Z_-jhs CSS Expression iu`(s+bdHjl
——相信许多人在用这个方法实现容器最小宽度时都时常会被莫名其妙的死机所困扰，最后往往无果而终。bPa \1HZ:e*DTl up
这里特别需要指出的是两点：
:}y4\c d5f 1. IE6-的标准模式下和quirk模式下代表视口的元素是不一样的，前者为<html>，后者则为<body>；
g:| i,s#L'o9R 2. IE6-在以上两种不同的模式下，其对包含内容溢出时的不同表现形式，从而导致了赋值判断上的死循环。解释起来有些啰嗦，自己实践一下吧。
^wM1bRd!C-m c k CSS Expression实现最小宽度源码：Tw0t\9V*N
[code] 7S3V]s gc:m~
<style type="text/css">r#} n#f+PLMv
body{ text-align:center;}2VRUrK w:[q\
#min-width{
f_%}&`^i        min-width:900px;ZQ4p:fYs'D
       _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");2A;D/],a#y r
       line-height:200px;
)|(Zd*b{Q{ g        background:#ccc;`,M!n(O4tXK
}'Kr3zKr,]G;QFO
</style>
P n1X3f%N"ke:\ <div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
;G(]*M4|~)d NK [/code]
%U4u(NLl4Ti&lo 演示：t NdC)^`
[code]
&OQ0u.k`+jVmJn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
t%pq~)~0Ug <html xmlns="http://www.w3.org/1999/xhtml">
%z1i2E8?+S'@1Zo/c&e\ <head>
5T{;T/n e*O <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
\ ex2y%q]1xZ <title>CSS Expression实现最小宽度</title>
G*P|4SdL.A <style type="text/css">7F[%Llt
body{ text-align:center;}
7a4c4di-In #min-width{R M OA{
min-width:900px;jca2ck4NI!e2Uf$Y&|
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");
-y3N&\ SQ![F2r Y @ line-height:200px;)J3J7jl W6`[
background:#ccc;
apg M|V _zoom: /* 触发layout才能查看clientWidth，可省略掉 */#~?0i{6?]5S
}l!w*u4RN|
</style>)v(@K$Q$n yL
</head> | C+u nB}
<body>"zLoy[8MNk
<div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div>
7[O3D4m7q7v Y bFF <input name="" type="button" onClick="alert('容器宽度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'视口宽度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看宽度" />6AA-J$l2t `0I3g2p
</body>
d;}XvnFK </html>
#EQU](e3e2@y,T7T [/code]kyIl6cfyM5o
以上两种解决方法在IE6-的标准模式下和quirk模式下都可实现，IE Expression在这个应用中也未发现CPU效率问题。

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.