开发者社区 问答 正文

关于IE7 float 换行的一个奇怪问题

我写了两个div,一个width是30%,左浮动,一个width 70%右浮动,在其他浏览器都可以(包括360兼容模式),
但在IE7下会根据我的我的F12工具栏的高度变化而出现换行,请问哪位知道原因。

                    <div class="form_group">
                        <div class="f_l t_r span3">
                            <span class="f_g_tit">
                                *姓名
                            </span>
                        </div>
                        <div class="f_r t_l span7">
                            <input type="text" class="span6" name="name_"/>
                            <span class="help_msg"></span>
                        </div>
                    </div>

screenshot

展开
收起
a123456678 2016-05-27 14:38:58 2213 分享 版权
1 条回答
写回答
取消 提交回答
  • 浮动了自然要清除浮动,content1与content2都放在同一个div里面浮动,不管content1和content2内容多少外层div的高度永远为0(标准情况下),ie6的hasLayOut属性会自动迫使外层div包容里面的内容,所以这里会看起来没有问题,hasLayOut其实是ie的一个备受诟病的属性,IE7以后已经有很大修正所以这里IE7conttent3不往下反而是正确的。 清除浮动的方法很多,楼上的方法比较直观,缺点是增加了多余html代码,另一种方式如下:  #outer{  display:inline-block;//启动ie的hasLayOut属性 } #outer:after{//标准浏览器 content:'.'; display:block; height:0; clear:both; visibility:hidden }  <div id="outer">  <div style="float:left">content1</div>  <div style="float:right">content2</div> </div> <div class="bootom">content3</div>
    

    “答案来源于网络,供您参考” 希望以上信息可以帮到您!

    2019-09-26 15:51:00
    赞同 展开评论
问答标签:
问答地址: