1

这是html：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

和styles.css：

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

这在 FF 和 Chrome 中运行良好。它应该是两列，一列带有文本，一列带有图标和少量文本。如何在 IE 中完成这项工作？我尝试了 div clear=both ，但没有做任何事情。

也为任何可以给我一些关于如何编写页面和使用跨 FF、Chrome 和 IE >= 7 的样式的提示的人投票。

4

4 回答 4

3

可能是因为您没有定义文档类型，而 IE 正在 Quirksmode 中查看您的页面作为标准模式（或几乎标准）。

阅读本文以了解更多信息：

http://www.quirksmode.org/css/quirksmode.html

我已经在标准模式下检查了您的网站，并且在 IE7 中，2 列的行为应如此（如在 FF 和 Chrome 中）

于 2009-09-18T07:31:01.490 回答
2

我可以建议几件事，尽管我不确定如果其中任何一个确实会有所帮助：

  1. 在您的文档上放置一个 DOCTYPE（例如 Transitional HTML 4.01）。这迫使 IE 进入所谓的“标准兼容”模式，而不是委婉的“怪癖”模式；
  2. 不要像那样重用左右类。它迫使您使用只有 IE7+ 的子选择器，并且不需要它；
  3. 如果您的 div 只包含浮点数，它将具有 0 高度。您可以通过在它们下方放置一个 0 高度的 div 并在其下方使用“clear：both”或在父级上放置“overflow：hidden”来解决此问题；
  4. 摆脱对齐=“中心”。那不是标准的。

这是一个可以考虑使用的骨架：

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

结合：

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

等等。

于 2009-09-18T07:37:54.760 回答
1

首先我跳过了所有

div#main-header-content > div.left

并替换为

div#main-header-content div.left

因为它们在 IE6 中不起作用。

其次，我会使用

div.right {
    float: left;
}

另外，我肯定会跳过<div align="center">...</div>，因为它已被弃用。相反，我会将 div.content 重新排列为

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

居中的技巧是（使用位置：相对或位置：绝对）将左点设置为宽度的一半，然后将边距移回元素宽度的一半（其中“元素”是您想要的元素中央）。

于 2009-09-18T07:39:41.363 回答
0

修改后的 CSS

div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

而不是这些类的你的css你试试这在IE和Firefox中也能正常工作..

于 2009-09-18T08:19:27.873 回答