css中实现兼容IE6、IE7、FF的min-height最小高度-css教程-PHP中文网

首页

web前端

css教程

css中实现兼容IE6、IE7、FF的min-height最小高度

黄舟

Jul 21, 2017 am 09:32 AM

css

css中实现兼容IE6、IE7、FF的min-height最小高度

#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 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为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 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

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

clientHeight与offsetHeight的区别

许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？

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>

登录后复制

以上是css中实现兼容IE6、IE7、FF的min-height最小高度的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7508

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。