解决IE7不能自适应高度及各种bug解决方法 div+css

最新推荐文章于 2020-07-29 23:03:13 发布

数元技术

最新推荐文章于 2020-07-29 23:03:13 发布

阅读量440

点赞数

分类专栏： WEB前端文章标签： CSS Firefox IE 互联网 Opera

本文链接：https://blog.csdn.net/andrew1024/article/details/83680920

版权

WEB前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

解决IE7不能自适应高度及各种bug解决方法 div+css

解决IE7不能自适应高度

#content{
min-height:500px;
height:auto;/*IE7*/
_height:500px;/*IE6*/
display:table;/*firefox,opera*/
}

--------------以下搜集自互联网，好文讲解的很详细，读后受益匪浅------------------

bug有三：

1. 无论是“宽度”的内容过长，还是“高度”的内容过长，都会引发此bug。
2. 无论是文字、图片，还是任意有宽度和高度概念的“可见元素”，它们的“过宽”和“过高”都会引发此bug。
3. 任意有宽度和高度概念的“可见元素”,它们在默认状态下的“overflow”样式的值都是“Visible”（即使你没有设置这个样式）。

为了达到最终想要的结果，可能需要使用不推荐使用的措施——css hack。
如何解决“横向撑开”问题
用“word-wrap: break-word”解决

导致布局混乱的主要原因，是IE6对overflow的visible的错误解释，才导致宽度被“撑开”才造成的。所以，我们必须采取措施，让IE6中容器不能那么“放纵孩子”才可以。方法就是使用“word-wrap: break-word”样式（IE特有，FireFox不起任何作用），强制要求容器内的内容不允许“撑开”父容器。下面的示例可能有助于理解。
用“overflow: hidden”解决

显然，用“word-wrap: break-word”又导致了IE（IE6和IE7）和FireFox的显示结果新的不一致。那还有没有其他的办法呢？“擒贼先擒王”，既然是 “overflow: visible”导致的bug，那直接改变“overflow”的值不就可以了吗？所以，使用“overflow: hidden”便能让IE6、IE7和FireFox显示一直。下面的这个示例，可能会有助于你的理解——

如何让“很长度文字”换行显示呢？其实在前面我们已经使用到了，那就是“word-wrap: break-word”。虽然它是IE的特有样式，但是足以先解决IE6和IE7中的问题。但是FireFox中没有这个样式，那FireFox下如何使 “很长文字”自动换行显示呢？我们遗憾的发现FireFox并没有提供类似的样式供我们使用，目前唯一的解决方案是利用JavaScript实现。原理很简单，就是根据宽度，将文本截取成多段，在每段后面强制加上换行符。下面的实现示例可能会有助于你的理解——
<!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=utf-8" />
<meta name="Keywords" content="博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面/>
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
word-wrap: break-word;
}
</style>
</head>
<body>

<div id="div1">
alonglonglonglonglonglonglonglonglongword from http://justinyoung.cnblogs.com/

</div>

<script type="text/javascript">
// <![CDATA[
if(document.getElementById && !document.all) wordWarp4ff(6)/*数值6根据宽度需要发生变化*/
function wordWarp4ff(intLen){
var obj=document.getElementById("div1");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
// ]]>
</script>
</body>
</html>

上面解决方法，只是“横向”的、宽度的问题，其实“‘overflow:visible’IE6渲染bug”，同样也会引起纵向的、高度方面的页面布局混乱。解决“纵向撑开bug”和解决“横向撑开bug”需要采用完全不同的解决方案。但是，相比“纵向撑开bug”解决方案，“横向撑开bug”解决方案却简单很多——只要我们让IE7和FireFox，也能像IE6中那样根据内容，自适应高度即可。如何才能让容器在IE7和FireFox中能够自适应高度呢？其实很简单，也是IE7的重要改进之一，使用“min-height”样式。虽然IE7中已经支持“min-height/min-width” 和"max-height/max-width"样式。但是IE6却不认识这些"min-"、"max-"开头的样式，所以，我们还需要使用一个css hack为IE6设置一个“height”，只让IE6认识，IE7和FireFox都不认识。