Question

我正在尝试创建流畅的布局。一切都在运行FF，Chrome，Safari和IE8

这在IE7中不起作用。我确信这是浮动容器的问题。试图做一些明确的修复，但似乎没有用。只是不确定我缺少什么，任何想法或建议都表示赞赏。

如果你比较它在IE7中呈现的方式与IE8的一些注意事项：

第一行的背景颜色是背景颜色容器
缺少容器的下边框和边距

上的实例

这是HTML

<div class="container layout">
    <div class="containerContent row">

        <div class="group">
            <div class="column">
               <div class="component">
                Player 1:
               </div>
            </div>
            <div class="column">
                <div class="component">
                    <input class="text" type="text"/>
                </div>
            </div>

        </div>
        <div class="groupByTwo group">
            <div class="column">
                <div class="component">
                Player 2:
                </div>
            </div>
            <div class="column">
                <div class="component">
                    <input class="text" type="text"/>
                </div>
            </div>

        </div>
        <div class="clearFix"></div>
    </div>
</div>

这是CSS

.container{
    margin: 5px;
    border: 1px solid #fff;
    background-color:  #aaa;  
}

.containerContent{
    margin: 1px;
    background-color: #f5f5f5;
}

.group{  
   float: left;
   width: 50%;
   overflow: hidden;
}

.column{
    float: left;
    width: 50%;
    overflow: hidden;
}

.component{
    padding: 5px;   
}

.clearFix{
  clear: both;   
}

Answer 1

这绝对是一个hasLayout问题，就像skybondsor说的那样。

我见过清除花车的最佳方式是：

.floatParent {
    zoom: 1; <-- this is for IE7
}
.floatParent:after { <-- this is for all the good browsers
    content: "\0020"; 
    clear: both;
    display: block;
}

然后你可以从标记中删除那个反语义的clearfix div，并且只是有这样的东西：

<div class="floatParent">
    <div class="floating">I FLOAT!</div>
    <div class="floating">WHOA ME TOO!</div>
</div>

然后，这只是修复那些讨厌的表单字段，由于某种原因总是导致布局问题（通过下一行）。

流体布局纯CSS

1 个答案: