ie6實現min-width/max-width

1.實現最小寬度min-width

標準瀏覽器和ie7+用:min-width:1008px;

這樣在實現自適應佈局時可以保證佈局不小於一定寬度，同時寬屏或窄屏視窗被使用者拖窄後不會出現佈局自動換行。

對於Ie6以下模擬實現用的css表示式:

_width:expression((documentElement.clientWidth < 1008) ? “1008px” : “auto” );

2.最大寬度max-width

標準瀏覽器和ie7+用:max-width:600px;

實際中可以對佈局元素如divOut{width:100%;max-width:1008px;margin:0 auto;}這樣在寬屏裡讓他不大於1008px寬，但這裡我們允許視窗尺寸變小時可以自適應。

還有比如文章頁中，對圖片顯示img{max-width:600px;}我們保證圖片不要大於我們的文章內容容器寬度100px寬，以免圖片顯示不完整。

對於Ie6以下模擬實現用的css表示式:

_width:expression((documentElement.clientWidth >600) ? “600px” : “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 content=”text/html; charset=gbk” http-equiv=”Content-Type” />
<title>min-width/max-width</title>
<style type=”text/css”>

div

{

  margin:20px auto;

  background-color:#f0f6f9;

  border:1px solid #606669;

}

#div1

{

  min-width:300px;

  _width:expression((documentElement.clientWidth < 300) ? “300px” : “auto” );

}

#div2

{

  max-width:400px;

  _width:expression((documentElement.clientWidth > 600) ? “600px” : “auto” );

}
</style>
</head>

<body>

  <div id=”div1″>

    這裡是測試如何實現最小寬度的div元素，你可以拖動視窗尺寸試試.對於ie6來說，如我我們設定一個寬度，超出這個寬度時會撐開容器的，所以起到一個min-width的作用。

  </div>



  <div id=”div2″>

    這裡是測試如何實現最大寬度的div元素.

  </div>
</body>

</html>

————補例子————

<!DOCTYPE html>
<html>
<head>
<title>ie6 實現 min-width</title>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf8” />
<style type=“text/css”>
*
{
margin:0;
padding:0;
}
body
{
padding:10px;
font-size:14px;
min-width:500px;
_width:expression((documentElement.clientWidth < 500) ? “500px” : “auto” );
}
.section
{
margin:10px 0;
padding:5px;
line-height:150%;
color:#369;
border:1px solid #ccc;
background-color:#F0F0F0;
}
</style>
</head>
<body>
<div id=“sec1” class=“section”>
<p>使用者體驗（User Experience，簡稱UE）是一種純主觀在使用者使用產品過程中建立起來的感受。但是對於一個界定明確的使用者群體來講，其使用者體驗的共性是能夠經由良好設計實驗來認識到。新競爭力在網路營銷基礎與實踐中曾提到計算機技術和網際網路的發展，使技術創新形態正在發生轉變，以使用者為中心、以人為本越來越得到重視，使用者體驗也因此被稱做創新2.0模式的精髓。在中國面向知識社會的創新2.0——應用創新園區模式探索中，更將使用者體驗作為“三驗”創新機制之首。
</p>
</div>
</body>
</html>

圖片:

當拖拽視窗尺寸小於500畫素時，會出現滾動條，否則自適應寬度。這個屬性經常用在佈局上，比如我們想給我的頁面一個最小寬度970px，當寬螢幕時讓其自適應。

至於css hack，不推薦使用，大家可以考慮把針對ie之類的hacks的樣式，拿出去放在一個比如ie-patch.css之類

的檔案裡面，才有ie專有的條件註釋之類的引入就行了。

—————-至於ie的width有個類似min-width的問題—————

關於[匿名]janus說的width的特性是不是，類似下面的情況：

<!DOCTYPE html>
<html>
<head>
<title>ie6 實現 min-width</title>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf8” />
<style type=“text/css”>
*
{
margin:0;
padding:0;
}
body
{
padding:10px;
font-size:14px;
min-width:500px;
_width:500px;
}
.section
{
margin:10px 0;
padding:5px;
line-height:150%;
color:#369;
border:1px solid #ccc;
background-color:#F0F0F0;
}
#sec1
{
width:500px;
}
#sec1 p
{
width:900px;
}
</style>
</head>
<body>
<div id=“sec1” class=“section”>
<p>使用者體驗（User Experience，簡稱UE）是一種純主觀在使用者使用產品過程中建立起來的感受。但是對於一個界定明確的使用者群體來講，其使用者體驗的共性是能夠經由良好設計實驗來認識到。新競爭力在網路營銷基礎與實踐中曾提到計算機技術和網際網路的發展，使技術創新形態正在發生轉變，以使用者為中心、以人為本越來越得到重視，使用者體驗也因此被稱做創新2.0模式的精髓。在中國面向知識社會的創新2.0——應用創新園區模式探索中，更將使用者體驗作為“三驗”創新機制之首。
</p>
</div>
</body>
</html>

標準瀏覽器overflow時:

ie6:

當內容尺寸撐開容器時，有點最小寬度500px的感覺，對於溢位，我們這樣控制：

這樣控制容器溢位的部分隱藏，當然還有其他滾動條之類的。

#sec1
{
width:500px;
overflow: hidden;
}

利用這點到可以實現比如min-height:

<!DOCTYPE html>
<html>
<head>
<title>ie6 實現 min-width</title>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf8” />
<style type=“text/css”>
*
{
margin:0;
padding:0;
}
body
{
padding:10px;
font-size:14px;
}
.section
{
margin:10px 0;
padding:5px;
line-height:150%;
color:#369;
border:1px solid #ccc;
background-color:#F0F0F0;
}
#sec1
{
min-height:200px;
_height:200px;
}
</style>
</head>
<body>
<div id=“sec1” class=“section”>
<p>使用者體驗（User Experience，簡稱UE）是一種純主觀在使用者使用產品過程中建立起來的感受。但是對於一個界定明確的使用者群體來講，其使用者體驗的共性是能夠經由良好設計實驗來認識到。新競爭力在網路營銷基礎與實踐中曾提到計算機技術和網際網路的發展，使技術創新形態正在發生轉變，以使用者為中心、以人為本越來越得到重視，使用者體驗也因此被稱做創新2.0模式的精髓。在中國面向知識社會的創新2.0——應用創新園區模式探索中，更將使用者體驗作為“三驗”創新機制之首。
</p>
</div>
</body>
</html>

不然拖拽視窗感受下。

本文轉自 xcf007 51CTO部落格，原文連結：http://blog.51cto.com/xcf007/155881，如需轉載請自行聯絡原作者

ie6實現min-width/max-width

相關文章