• 首页
  • ASPCMS
  • DEDECMS
  • DuxCms
  • 工具下载
  • SEO知识
  • WEB前端开发
  • 当前位置:首页 > WEB前端开发 > 特效代码 >
  • 特效代码
  • IE6下ul列表li使用float后高度变大bug解决方法

  • 已有 人阅读此文  -  2015.04.08  -  特效代码  -  萤火星

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>

  • 澳大利亚科幻频道Sci F更名为SF启用新台标
  • 摄政公园音乐学院视觉形象设计

如何解决这个问题呢?其实很简单,而且也有多种方法:

方法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>

  • 澳大利亚科幻频道Sci F更名为SF启用新台标
  • 摄政公园音乐学院视觉形象设计

在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>

  • 澳大利亚科幻频道Sci F更名为SF启用新台标
  • 摄政公园音乐学院视觉形象设计

小知识:什么是haslayout?

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。


如果本篇文章帮到了你,那么,请点击右侧的百度分享,让我们一起帮助更多的朋友!
  • 上一篇:WEB前端页面常用CSS简写优化技
  • 下一篇:jQuery性能优化
前端交流群
热门文章
  • 1探秘JavaScript框架
  • 2CSS3 Transition
  • 3探秘JavaScript框架-1.1创建JF对象
  • 4探秘JavaScript框架-2.2样式操作
  • 5WEB前端页面常用CSS简写优化技
推荐阅读
  • CSS3 Transition
ASPCMS | DEDECMS | DuxCms | 工具下载 | SEO知识 | WEB前端开发 | 百度地图
萤火星的经验分享!友情赞助!
鲁ICP备15006695号-1