讓IE6支援min-width最小寬度_經驗交流
來源：互聯網
上載者：User
可瀏覽器使用率占最高的ie6偏偏不支援，雖然後來出場的ie7已經開始支援此屬性。不過就使用者體驗的角度來說多瀏覽器支援也是很重要的，更何況就目前來說ie6的佔有率還是最高的。
特別是在流動布局的使用下，特別會用到min-width、min-height、max-width、max-height這些屬性，以下是一種非常方便就可以實現在ie6顯示min-width、min-height、max-width、max-height同等效果的方法，在此與大家一同分享。
閑話少說，上源碼：
觸發並利用IE6-layout的怪異特性，css實現：
複製代碼 代碼如下:
ie6-下，容器實現類比min-width效果。請任意改變瀏覽器視窗大小，再點擊按鈕“查看寬度”。
css實現示範：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS實現最小寬度</title> <style type="text/css"> body{ text-align:center;} .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> </head> <body> ie6-下，容器實現類比min-width效果。請任意改變瀏覽器視窗大小，再點擊按鈕"查看寬度"。 <input name="" type="button" onclick="alert('容器寬度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'視口寬度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看寬度" /> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
擴充示範：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS實現最小寬度</title> <style type="text/css"> body{ text-align:center;} .ie6-out{ _margin-left:900px; _zoom:1; } .ie6-in{ _position:relative; _float:left; _margin-left:-900px; background:#f00; line-height:200px; } #min-width{ min-width:900px; background:#ccc; _zoom:1; } </style> </head> <body> aa aaie6-下，容器實現類比min-width效果。請任意改變瀏覽器視窗大小，再點擊按鈕"查看寬度"。 <input name="" type="button" onclick="alert('容器寬度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'視口寬度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看寬度" /> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
CSS Expression
——相信許多人在用這個方法實現容器最小寬度時都時常會被莫名其妙的死機所困擾，最後往往無果而終。
這裡特別需要指出的是兩點：
1. IE6-的標準模式下和quirk模式下代表視口的元素是不一樣的，前者為，後者則為；
2. IE6-在以上兩種不同的模式下，其對包含內容溢出時的不同表現形式，從而導致了賦值判斷上的死迴圈。解釋起來有些囉嗦，自己實踐一下吧。
CSS Expression實現最小寬度源碼：
複製代碼 代碼如下:
ie6-下，容器實現類比min-width效果。請任意改變瀏覽器視窗大小，再點擊按鈕“查看寬度”。
示範：
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS Expression實現最小寬度</title> <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; _zoom: /* 觸發layout才能查看clientWidth，可省略掉 */ } </style> </head> <body> ie6-下，容器實現類比min-width效果。請任意改變瀏覽器視窗大小，再點擊按鈕"查看寬度"。 <input name="" type="button" onClick="alert('容器寬度='+document.getElementById('min-width').clientWidth+'px'+'\n\n'+'視口寬度='+(document.documentElement.clientWidth||document.body.clientWidth)+'px');" value="查看寬度" /> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
以上兩種解決方案在IE6-的標準模式下和quirk模式下都可實現，IE Expression在這個應用中也未發現CPU效率問題。
可瀏覽器使用率占最高的ie6偏偏不支援，雖然後來出場的ie7已經開始支援此屬性。不過就使用者體驗的角度來說多瀏覽器支援也是很重要的，更何況就目前來說ie6的佔有率還是最高的。
特別是在流動布局的使用下，特別會用到min-width、min-height、max-width、max-height這些屬性，以下是一種非常方便就可以實現在ie6顯示min-width、min-height、max-width、max-height同等效果的方法，在此與大家一同分享。
min-width:700px;
width:expression((documentElement.clientWidth < 700) ? "700px" : "auto" );
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>指令碼之家www.jb51.net</title> <style type="text/css"> <!-- *{ padding:0; margin:0; } body{ min-width:700px; width:expression((documentElement.clientWidth < 700) ? "700px" : "auto" ); } --> </style> </head> <body> 把瀏覽器縮小看看！ </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
