Question

我有以下的html＆amp;阶级结构。它在Firefox中显示为预期，但在IE 8中，rt-col被推送到下一行。关于什么可能出错的任何想法？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...
...
<div id="main" class="container_12">
  <div id="lt-col" class="grid_8">
  ...
  </div>
  <div id="rt-col" class="grid_4">
  ...
  </div>
</div>

与容器有关的CSS＆amp;网格如下：

#main:after, #lt-col:after, #rt-col:after { 
   content: "."; 
   height: 0; 
   visibility: hidden; 
   display: block; 
   clear: both; 
} 

#main { 
   width: 960px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 10px;
}

Answer 1

假设您正在尝试构建左右列网格：

您需要为每列定义显式宽度。目前，你没有。既然你正在使用“清楚：两者兼而有之”。两列上的属性和值，它们只会显示为行。

将此添加到您的CSS（或宽度的某些变体），您的行将变为列：

    #lt-col {
            float: left;
            width: 50%;
    }
    #rt-col {
            float: right;
            width: 50%;
    }

Answer 2

@clairesuzy我认为问题在于应用的样式。有一些样式是在主div或rt-col和lt-col div中添加填充

这可以通过使用以下代码以

开头轻松排序

<div class="container_12">
  <div class="grid_8">
  ...
  </div>
  <div class="grid_4">
  ...
  </div>

  <div class="clear"></div>
</div>

上面的这个开箱即用，无论任何造型......

然后执行此操作并确保没有填充

<div id="main">

    <div class="container_12">

        <div class="grid_8">
            <div id="lt-col">...</div>
        </div>
        <div class="grid_4">
            <div id="rt-col">...</div>
        </div>

    <div class="clear"></div>   
    </div>
</div>

您希望做的简化版

IE 8错误地定位960网格

2 个答案: