IE6下ul列表li使用float后高度变大bug解决方法
来源:互联网 发布:阿里云车助手安卓版 编辑:程序博客网 时间:2024/05/14 21:18
这两天做页面模板,有些li使用了float:left,结果发现行高在IE6下与其他浏览器不同了,总要高出一些。查了一下,发现这个是因为IE下特有的hasLayout造成的
这两天做页面模板,有些li使用了float:left,结果发现行高在IE6下与其他浏览器不同了,总要高出一些。查了一下,发现这个是因为IE下特有的hasLayout造成的,很多的IE下的CSS BUG都其有关。
代码如下:
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
<ul>
<li>澳大利亚科幻频道Sci F更名为SF启用新台标</li>
<li>摄政公园音乐学院视觉形象设计</li>
</ul>
如何解决这个问题呢?其实很简单,而且也有多种方法:
方法1:使用zoom:1
折叠HTML/XML Code复制内容到剪贴板
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
<ul>
<li>澳大利亚科幻频道Sci F更名为SF启用新台标</li>
<li>摄政公园音乐学院视觉形象设计</li>
</ul>
在ul的样式表中增加了zoom:1就ok了。
方法2:
HTML/XML Code复制内容到剪贴板
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;
}
* html ul {
height:1%;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
<ul>
<li>澳大利亚科幻频道Sci F更名为SF启用新台标</li>
<li>摄政公园音乐学院视觉形象设计</li>
</ul>
小知识:什么是haslayout?
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。
- IE6下ul列表li使用float后高度变大bug解决方法
- li中嵌套ul在ie6,7下的bug
- li设置float属性后ul的高度不能自适应解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ul li高度在ie6、ie7、ie8、FF下兼容问题解决
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- IE6、7下li元素的子元素为dl,ul,ol时产生的bug
- IE6下li设置float属性后,li的宽度不能自适应
- div ul li自动适应高度float:left
- div ul li 嵌套后如何解决增加多个li后ul高度自适应问题
- ul的li float后居中的问题
- ul li 高度自适应
- ie6下ul下的li不自动换行
- ie6中li插入图片后下方有空隙(经典bug)多种解决方法
- ie6 li间隙问题 使用float属性是出现空白的解决方法
- li浮动引起ul高度坍陷的解决方法
- 利用eclipse构建和部署maven工程
- Mysql 命令
- windows下安装oracle12c遇到的一个小问题
- Delete archivelog in the primary database
- •canimatectrl类-(2013/09/18)
- IE6下ul列表li使用float后高度变大bug解决方法
- jsonMap
- php 截字 substr_m($str,$start,$length);
- 苹果Secure Enclave是什么 为什么它很重要?
- Notepad++ for Peoplecode and SQR
- 常见正则表达式
- flex actionscript时间处理
- openstack下停止/启动虚拟机脚本
- NODEJS记事本