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

andrew1024

浏览: 74764 次
性别:
来自: 上海

最近访客更多访客>>

asan13

liyihz2008

vov8899

imant

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前端

CSS Firefox IE 互联网 Opera

解决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都不认识。

分享到：

DIV+CSS 自适应高度(在IE6、IE7、fireFo ... | Apache URL重写实现伪静态

2010-08-06 15:50
浏览 1049
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论