html - IE 8 错误定位 960 网格

标签 html css internet-explorer-8 960.gs

我有下面的 html 和类结构。它在 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 如下:

#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;
}

最佳答案

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

您需要为每一列定义明确的宽度。目前,你没有。并且由于您使用的是“clear: both;”属性和值,它们将简单地显示为行。

将此添加到您的 CSS(或宽度的一些变化),您的行将变成列:

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

关于html - IE 8 错误定位 960 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5426213/

相关文章:

javascript - 如何通过 JavaScript 将渐变填充分配给 SVG 形状?

css - 为什么这个内联 block 不会一直向右对齐?

internet-explorer-8 - CSS3 PIE 边框重叠

url - 需要在 ie8 的新选项卡中打开链接!

html - 我应该使用什么标签属性来表示某些文本的不同含义

jQuery:在跨度上使用鼠标事件比在 anchor 上使用鼠标事件更糟糕吗?

html - 使父 anchor 链接颜色在下拉悬停时发生变化

javascript - 使用多个下拉菜单切换无法按预期工作

php - 将一个简单的 html/css 页面转换为 wordpress

html - CSS Internet Explorer 8 问题中的框阴影