CSS에서 IE6, IE7, FF와 호환되는 최소 높이 최소 높이 구현

CSS에서 IE6, IE7, FF와 호환되는 최소 높이 최소 높이를 구현합니다

#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表达式关联起来，对浏览器要求较高1E5以上使用。不建议常用*/

clientHeight, offsetHeight, scrollHeight 정보

window.screen.availWidth 현재 화면 너비(빈 공간)를 반환합니다.
window.screen.availHeight 반환 현재 화면 높이(빈 공간)
window.screen.width                                                                           ‐ ‐ ‐ ‐                                                    사용 사용 사용 사용 사용 사용   out out off out out out out out out out outunder out out of '''' out to be ‐ – – – – – – – – – – – – – – – – – – – – – -Body
여기에서는 네 가지 브라우저에서 document.body의 clientHeight, offsetHeight 및 scrollHeight를 해석하는 방법에 대해 이야기합니다.

4가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox)입니다.
clientHeight
clientHeight에 대해 누구도 이의를 제기하지 않습니다. 그들은 모두 콘텐츠가 보이는 영역의 높이, 즉 페이지 브라우저에서 콘텐츠를 볼 수 있는 영역의 높이라고 생각합니다. , 일반적으로 마지막 도구 모음 아래부터 상태 표시줄 위까지 이 영역은 페이지 콘텐츠와 관련이 없습니다.

offsetHeight
IE와 Opera는 offsetHeight = clientHeight + 스크롤 막대 + 테두리를 고려합니다.
NS와 FF는 offsetHeight가 웹페이지 콘텐츠의 실제 높이이며 clientHeight보다 작을 수 있다고 믿습니다.

scrollHeight
IE와 Opera는 scrollHeight를 웹 페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.
NS 및 FF는 scrollHeight를 웹 페이지 콘텐츠의 높이로 간주하지만 최소값은 clientHeight입니다.

간단히 말하면
clientHeight는 브라우저를 통해 콘텐츠가 보이는 영역의 높이입니다.
NS와 FF는 offsetHeight와 scrollHeight가 모두 웹 콘텐츠 높이라고 생각하지만, 웹 콘텐츠 높이가 clientHeight보다 작거나 같은 경우 scrollHeight의 값은 clientHeight이고 offsetHeight는 clientHeight보다 작을 수 있습니다.
IE와 Opera는 offsetHeight가 클라이언트 높이 스크롤 막대와 테두리를 더한 가시 영역이라고 믿습니다. scrollHeight는 웹페이지 콘텐츠의 실제 높이입니다.

마찬가지로 clientWidth, offsetWidth 및 scrollWidth에 대한 설명은 위와 동일하며 높이를 너비로 바꾸면 됩니다.

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

clientHeight와 offsetHeight의 차이점

많은 기사에서 clientHeight와 offsetHeight의 차이점을 소개했습니다. clientHeight 값에는 스크롤 막대가 포함되지 않습니다. offsetHeight 높이에는 스크롤 막대 높이가 포함됩니다. 그런데 clientHeight와 offsetHeight의 값은 정확히 무엇으로 구성되어 있나요? 이 두 숫자의 값을 계산하는 방법은 무엇입니까?

1. clientHeight와 offsetHeight의 값은 어떻게 결정되나요?

다음 DIV가 있는 경우 표시되는 본문은 "This is the main body of DIV"입니다.

위 그림과 같이 clientHeight 값은 DIV 콘텐츠의 실제 높이와 CSS의 패딩 값에 의해 결정되는 반면, offsetHeight 값은 DIV 콘텐츠의 실제 높이, 패딩 값에 의해 결정됩니다. CSS, 스크롤바 높이 및 DIV의 테두리 값. CSS의 여백 값은 clientHeight 및 offsetHeight 값에 영향을 주지 않습니다.

2. CSS의 높이 값은 clientHeight 및 offsetHeight에 어떤 영향을 미치나요?

먼저 CSS에서 Height가 정의하는 높이가 무엇인지 살펴보겠습니다. 예를 들어, 본 글 마지막 부분의 "APPENDIX 샘플 코드"(참고: 이하 "샘플 코드")에서는 innerDIVClass의 Height 값을 50px로 설정하고, IE에서 계산한 값은 다음과 같습니다. 즉, IE에서 CSS의 Height 값은 패딩을 포함한 DIV의 높이(즉, Firefox의 offsetHeight 값)를 정의하지만 CSS의 Height 값은 DIV의 실제 콘텐츠 높이만 정의합니다. , 패딩은 이 값에 포함되지 않습니다(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에서 externalDiv.clientHeight 값이 0인 이유가 궁금할 것입니다. 이는 샘플 코드에서는 innerDIVClass의 Height 값이 정의되어 있지 않기 때문입니다. 이때 IE에서는 clientHeight의 값을 계산할 수 없습니다. 마찬가지로 예제 코드에서는 innerDIVClass의 Height 값을 마지막으로 변경하면 innerDIV.clientHeight의 값도 0이 됩니다. (참고: Firefox에서는 이 기능이 존재하지 않습니다).

CSS의 높이 값이 DIV에 표시될 콘텐츠의 높이보다 작은 경우(CSS에 오버플로 동작이 정의되지 않은 경우) 어떻게 되나요? IE에서는 전체 clientHeight(또는 offsetHeight) 값이 적용되지 않으며 DIV는 자동으로 확장되지만 Firefox에서는 DIV가 확장되지 않습니다. 예를 들어 샘플 코드에서는 innerDivClass의 Height 값을 0으로 설정하고 계산 결과는 다음과 같습니다. IE의 DIV는 확장되고 해당 clientHeight 값은 Firefox의 콘텐츠 높이와 패딩*2의 합과 같습니다. 텍스트는 DIV 경계를 오버플로하고 해당 clientHeight 값은 정확히 패딩 값의 두 배입니다. .

IE:

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

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>

위 내용은 CSS에서 IE6, IE7, FF와 호환되는 최소 높이 최소 높이 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!