当前位置: 代码迷 >> Web前端 >> 测试inline元素float后是不是会变为block元素
  详细解决方案

测试inline元素float后是不是会变为block元素

热度:85   发布时间:2012-09-05 15:19:35.0
测试inline元素float后是否会变为block元素

首先用span标签做下测试,贴上代码先

<!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>测试span float后是否会变为block元素</title>
        <style>
            body{ font:12px Arial, Helvetica, sans-serif; background:#FFF;}
			.d_a,.s_a{border:1px solid #CCC;}
			.d_a{width:300px;height:200px;margin:50px auto 0;} 
            .s_a{float:left;background:#EEE;margin-left:10px;}            
        </style>
    </head>
    
    <body>
        <div class="d_a">
        	<span class="s_a">我是span标签</span>
        </div>
    </body>
</html>
?

? .s_a有个margin-left,并且没有给其加display:inline,如果float后span变为block,那么这时IE6下就会出现双倍margin,下为IE6下的截图:

?

?

很明显.s_a的margin还是10相素,并没有出现IE6下两倍margin的情况!这是怎么回事,难道span float后还是inline,没有block吗?让我们继续深入测试,大家都知道inline元素给其加width、height是无效的,那么现在就简单了,要想证明span float后是否block只需再给span加上宽度或者高度试下,代码如下:

?

<!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>测试span float后是否会变为block元素</title>
        <style>
            body{ font:12px Arial, Helvetica, sans-serif; background:#FFF;}
			.d_a,.s_a{border:1px solid #CCC;}
			.d_a{width:300px;height:200px;margin:50px auto 0;} 
            .s_a{float:left;background:#EEE;margin-left:10px;width:200px;height:50px;}            
        </style>
    </head>
    
    <body>
        <div class="d_a">
        	<span class="s_a">我是span标签</span>
        </div>
    </body>
</html>
? ?

?最终结果如下图(来自IE6)

?

?

很明显span float后宽度、高度对其有影响了,结果应该是span标签 float后block了,但是本身的inline并没有丢!(既可设宽度、高度,IE6中又没有出现双倍margin) 这里只测试了<span>我想<a>标签之类的其它inline标签也是同样的情况。最后再说明一点:本身自带inline元素的标签在float和margin同时使用的情况下,不用担心会出现双倍margin,并不需要再特意加上display:inline!

  相关解决方案