css样式height:auto 在各浏览器下的兼容实现.
By:Roy.LiuLast updated:2013-09-11
在用流式布局时,内容会随着浏览器的大小而自动布局,伸缩,换行等。通常是在DIV 中来实现的。但我遇到的问题是在 dl dt 中来实现的。其实都差不多。当dt中的内容很多时,自动换行,然后dt 的高度自动增加。当然div 也是同样的道理。设置CSS 样式: height:auto ,结果发现,在chrome,firefox,safra下根本不生效,唯独在IE 下是可以的。
这下郁闷了。在网上搜索了半天,然后经过测试,用如下样式可以解决
所有代码如下
也许有人说,加上样式 word-break: break-all; word-wrap:break-word; 之后,不就是自动换行的吗?是的,确实换行了,但如果没有上面 height:100%; overflow:auto; 样式,就会撑到下面的行,很难看。而显示不是在同一个dt里面。也许是我外面特定的CSS问题引起,但这种方式,确实可以解决我的问题。
这下郁闷了。在网上搜索了半天,然后经过测试,用如下样式可以解决
height:100%; overflow:auto
所有代码如下
测试autoheight
- 11111这是第一行的测试,后面还有很多内容啦啦啦.........................
- 22222这是第二行的测试,后面还有很多内容啦啦啦.........................
也许有人说,加上样式 word-break: break-all; word-wrap:break-word; 之后,不就是自动换行的吗?是的,确实换行了,但如果没有上面 height:100%; overflow:auto; 样式,就会撑到下面的行,很难看。而显示不是在同一个dt里面。也许是我外面特定的CSS问题引起,但这种方式,确实可以解决我的问题。
From:一号门
Previous:阿里巴巴所有行业关键词,专业术语 下载
Next:在小区里面发现一只猫与壁虎在打架PK
COMMENTS