解决使用了float后IE6下li高度比Firefox或者IE8高的问题
2013-06-09 15:14
302 查看
在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题,因为包含浮动的元素是不会自动适应高度的,也就是不会被浮动元素撑开。
先看一个例子:
可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul 是看不到的。当然要让它伸长也很简单,只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构,不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。
注意:自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。
第一种方法:
IE 支持一个 CSS 属性 zoom, 这个元素接受一个数字或一个百分数,表示这个元素放大(缩小)的比例。例如:zoom:0.5或zoom:50% 表示缩小一半,而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后,IE 就会自动伸长了。一般情况下我们不需要放大或缩小,所以定义 zoom:1 就行了。现在的 CSS:
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下:
:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象成在最后一个 《li》 后面插入了一个 《span》。《/span》里面的内容是一个".",然后设置display:block; clear:both; height:0; 等属性 (这个比喻不一定准确)。
我们看下在 Firefox 下面的效果:
可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:"." 。
这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。
好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码:
第二种方法
我刚说过不止一种方法可以解决,那现在就来说说第二种方法。第二种方法还要更简单一些。同样,需要将浏览器分成两个阵营。不过和上一个有所不同,这 一次 IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari 等(这里暂时称为A浏览器)。对于这些浏览器,只要定义一个 overflow:auto; 即可,但是对于 IE6 和 IE5 (称为B浏览器)却不起作用。不过要 IE6,IE5 听话也很简单。只要定义一个高度即可,哪怕是 0 ,也会自动伸长。知道这些还没用,我们还得区分这两个阵营的浏览器才行。怎么区分呢?
A 浏览器支持属性选择符,而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
需要注意的是HTML 必须要有《 !DOCTYPE 》头部以及《html》有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括 Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式:
其实 height 完全可以写成 0,为什么要写1%呢?告诉你其实我也不知道,大家都这么写。
好了,第二种方法的 ul 全部样式代码如下:
先看一个例子:
<!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" /> <title>MicXP系统爱好者</title> <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> </head> <body> <ul> <li></li> <li></li> </ul> </body> </html>
可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul 是看不到的。当然要让它伸长也很简单,只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构,不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。
注意:自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。
第一种方法:
IE 支持一个 CSS 属性 zoom, 这个元素接受一个数字或一个百分数,表示这个元素放大(缩小)的比例。例如:zoom:0.5或zoom:50% 表示缩小一半,而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后,IE 就会自动伸长了。一般情况下我们不需要放大或缩小,所以定义 zoom:1 就行了。现在的 CSS:
ul { margin:0; padding:10px; list-style:none; background-color:#006699; zoom:1; /* IE */ }
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下:
ul:after { content:"."; display:block; clear:both; height:0; }
:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象成在最后一个 《li》 后面插入了一个 《span》。《/span》里面的内容是一个".",然后设置display:block; clear:both; height:0; 等属性 (这个比喻不一定准确)。
我们看下在 Firefox 下面的效果:
可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:"." 。
这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。
好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码:
ul { margin:0; padding:10px; list-style:none; background-color:#006699; zoom:1;/* IE */ } ul:after { content:"."; display:block; clear:both; height:0; font-size:0; line-height:0; }
第二种方法
我刚说过不止一种方法可以解决,那现在就来说说第二种方法。第二种方法还要更简单一些。同样,需要将浏览器分成两个阵营。不过和上一个有所不同,这 一次 IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari 等(这里暂时称为A浏览器)。对于这些浏览器,只要定义一个 overflow:auto; 即可,但是对于 IE6 和 IE5 (称为B浏览器)却不起作用。不过要 IE6,IE5 听话也很简单。只要定义一个高度即可,哪怕是 0 ,也会自动伸长。知道这些还没用,我们还得区分这两个阵营的浏览器才行。怎么区分呢?
A 浏览器支持属性选择符,而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
[xmlns] ul { /* html[xmlns] ul 的简写 */ overflow:auto; }
需要注意的是HTML 必须要有《 !DOCTYPE 》头部以及《html》有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括 Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式:
* html ul { height:1%; }
其实 height 完全可以写成 0,为什么要写1%呢?告诉你其实我也不知道,大家都这么写。
好了,第二种方法的 ul 全部样式代码如下:
ul { margin:0; padding:10px; list-style:none; background-color:#006699; } [xmlns] ul { /*html[xmlns] ul 的简写*/ overflow:auto; } * html ul { height:1%; }
相关文章推荐
- 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 li间隙问题 使用float属性是出现空白的解决方法
- li标签float:left,IE6中第二行会空缺一块,ie8和FF正常,怎么解决?
- 解决IE6、IE7、IE8、Firefox的CSS兼容性问题
- ul li高度在ie6、ie7、ie8、FF下兼容问题解决
- div错位/解决IE6、IE7、IE8样式不兼容问题,高度不适应
- CSS中使用!important解决IE6 IE7 Firefox兼容性问题
- div错位/解决IE6、IE7、IE8样式不兼容问题,高度不适应
- li标签float:left,IE6中第二行会空缺一块,ie8和FF正常,怎么解决?
- CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决方案
- 解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法【记录下来,以后可以使用】
- CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决方案
- 解决jQuery uploadify3.2 IE6 IE7 或者 firefox下不显示,chrome IE8 IE9却正常
- css div li 使用float但高度不确定造成的错位问题我遇到的(部分360浏览器问题)
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- IE6、 IE7、IE8、Firefox兼容性问题