min

紫梔 2017-03-17

展開全文

#mrjin {
    background:#ccc;
    min-height:100px;    /*高度最小值設置為：100px*/
    height:auto !important; /*兼容FF,IE7也支持 !important標簽*/
    height:100px; /*兼容ie6*/
    overflow:visible;
}

最大寬度...主流瀏覽器IE對max-width是不支持的，對這一屬性的設置在IE中是無效的。同樣的對min-width的設置也是無效的。

#commentlist img {
         width: expression(this.width > 500 ? 500: true); 
         max-width: 500px;
}   
#woaicss {
width:100%;  /*FF來說是有效的。而對于IE則沒有作用/*
max-width:500px;
width:expression(document.body.clientWidth > 500? "500px": "auto" );
background:#c00;
margin:0 auto;
line-height:30px;
}

/*expression與Javas cript表達式關聯(lián)起來，對瀏覽器要求較高1E5以上使用。不建議常用*/




關于clientHeight、offsetHeight、scrollHeight 

window.screen.availWidth      返回當前屏幕寬度(空白空間)  
window.screen.availHeight     返回當前屏幕高度(空白空間)  
window.screen.width           返回當前屏幕寬度(分辨率值)  
window.screen.height          返回當前屏幕高度(分辨率值)  
window.document.body.offsetHeight;     返回當前網(wǎng)頁高度  
window.document.body.offsetWidth;     返回當前網(wǎng)頁寬度  
我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。 

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。 
clientHeight 
大家對 clientHeight 都沒有什么異議，都認為是內容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域，與頁面內容無關。 

offsetHeight 
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 
NS、FF 認為 offsetHeight 是網(wǎng)頁內容實際高度，可以小于 clientHeight。 

scrollHeight 
IE、Opera 認為 scrollHeight 是網(wǎng)頁內容實際高度，可以小于 clientHeight。 
NS、FF 認為 scrollHeight 是網(wǎng)頁內容高度，不過最小值是 clientHeight。 

簡單地說 
clientHeight 就是透過瀏覽器看內容的這個區(qū)域高度。 
NS、FF 認為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內容高度，只不過當網(wǎng)頁內容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。 
IE、Opera 認為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內容實際高度。 

同理 
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。 

======================================================================= 

clientHeight與offsetHeight的區(qū)別 

許多文章已經(jīng)介紹了clientHeight和offsetHeight的區(qū)別，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么組成的呢？如何計算這兩個數(shù)的值？ 

1. clientHeight和offsetHeight的值由什么決定？ 

假如我們有以下的DIV，主要顯示的文字為"This is the main body of DIV"。 

如上圖所示，clientHeight的值由DIV內容的實際高度和CSS中的padding值決定，而offsetHeight的值由DIV內容的實際高度，CSS中的padding值，scrollbar的高度和DIV的border值決定；至于CSS中的margin值，則不會影響 clientHeight和offsetHeight的值。 

2. CSS中的Height值對clientHeight和offsetHeight有什么影響？ 

首先，我們看一下CSS中Height定義的是什么的高度。如在本文最后部分“APPENDIX示例代碼”（注：以下稱為“示例代碼”）中，innerDIVClass的Height值設定為50px，在IE下計算出來的值如下所示。也就是說，在IE里面，CSS中的Height值定義了 DIV包括padding在內的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定義的DIV實際內容的高度，padding并沒有包括在這個值里面(70 = 50 + 10 * 2)。 

in IE: 
innerDiv.clientHeight: 46 
innerDiv.offsetHeight: 50 
outerDiv.clientHeight: 0 
outerDiv.offsetHeight: 264 

in Firfox: 
innerDiv.clientHeight: 70 
innerDiv.offsetHeight: 74 
outerDiv.clientHeight: 348 
outerDiv.offsetHeight: 362 


在上面的示例中，也許你會很奇怪，為什么在IE里面outerDiv.clientHeight的值為0。那是因為示例代碼中，沒有定義 outerDIVClass的Height值，這時，在IE里面，則clientHeight的值是無法計算的。同樣，在示例代碼中，如果將 innerDIVClass中的Height值去年，則innerDIV.clientHeight的值也為0。(注：在Firefox下不存在這種情況)。 

如果CSS中Height值小于DIV要顯示內容的高度的時候呢（當CSS中沒有定義overflow的行為時）？在IE里面，整個 clientHeight（或者offsetHeight）的值并沒有影響，DIV會自動被撐大；而在Firefox里面，DIV是不會被撐開的。如在示例代碼中，將innerDivClass的Height值設為0，則計算結果如下所示。IE里面的DIV被撐開，其clientHeight值等于內容的高度與padding*2的和；而Firefox里面，文字將溢出DIV的邊界，其clientHeight值正好是padding值的兩倍。 

In IE: 
innerDiv.clientHeight: 38 
innerDiv.offsetHeight: 42 
outerDiv.clientHeight: 0 
outerDiv.offsetHeight: 256 

In Firefox: 
innerDiv.clientHeight: 20 
innerDiv.offsetHeight: 24 
outerDiv.clientHeight: 298 
outerDiv.offsetHeight: 312 


APPENDIX　示例代碼 

<html> 
<head> 
<style type="text/css">...... 
.innerDivClass 
{...}{...}{...}{ 
       color: red; 
       margin: 37px; 
       padding: 10px; 
       border: 2px solid #000000; 
       height: 50px; 


} 
.outerDivClass 
{...}{...}{...}{ 
       padding: 100px; 
       margin: 200px; 
       border: 7px solid #000000; 
} 
</style> 

<script>...... 
function checkClientHeight() 
......{ 
      var innerDiv = document.getElementById("innerDiv"); 
      var outerDiv = document.getElementById("outerDiv"); 

       result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />"; 
       result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />"; 
       result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />"; 
       result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />"; 
} 
</script> 
</head> 
<body> 
<div id="outerDiv" class="outerDivClass"> 
<div class="innerDivClass" id="innerDiv"> 
Hello world.         
</div> 
</div> 
<p></p> 
<div id="result"> 
</div> 
<input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" /> 
</body> 
</html>