css样式height:auto 在各浏览器下的兼容实现.

在用流式布局时,内容会随着浏览器的大小而自动布局,伸缩,换行等。通常是在DIV 中来实现的。但我遇到的问题是在 dl dt  中来实现的。其实都差不多。当dt中的内容很多时,自动换行,然后dt 的高度自动增加。当然div 也是同样的道理。设置CSS 样式: height:auto ,结果发现,在chrome,firefox,safra下根本不生效,唯独在IE 下是可以的。

这下郁闷了。在网上搜索了半天,然后经过测试,用如下样式可以解决
程序代码 程序代码

height:100%;
overflow:auto


所有代码如下
程序代码 程序代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试autoheight</title>
<style>
   .autoheight{
         height:100%;
      overflow:auto;
      word-break: break-all;
      word-wrap:break-word;
       }
</style>
</head>
<body>
    <dl>
        <dt class="autoheight">
             <span >
                               11111这是第一行的测试,后面还有很多内容啦啦啦.........................                  
                        </span>
        </dt>
                <dt class="autoheight">
             <span >
                               22222这是第二行的测试,后面还有很多内容啦啦啦.........................                  
                        </span>
        </dt>
    </dl>
</body>
</html>


也许有人说,加上样式 word-break: break-all;   word-wrap:break-word; 之后,不就是自动换行的吗?是的,确实换行了,但如果没有上面       height:100%;    overflow:auto; 样式,就会撑到下面的行,很难看。而显示不是在同一个dt里面。也许是我外面特定的CSS问题引起,但这种方式,确实可以解决我的问题。



除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: css 自动高度
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.