Question

这是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。它应该是两列一个带有文本，一个带有Icon和少量文本。我怎样才能在IE中完成这项工作？我尝试了div clear =两件事情，但没有做任何事情。

对于任何能够提供有关如何编写页面和使用可在FF，Chrome和IE＆gt; = 7下工作的样式的提示，任何人都可以投票赞成。

Answer 1

可能是因为你没有定义一个doctype而IE正在Quirksmode中查看你的页面，看作是标准模式（或几乎是标准模式）。

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

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

我已经在标准模式下检查了您的网站，在IE7中，2列的行为与他们应该的一样（如在FF＆amp; Chrome中）

Answer 2

我可以提出一些建议，但我不确定哪一个会有所帮助，如果它们中的任何一个都会：

在您的文档上放置DOCTYPE（例如Transitional HTML 4.01）。这迫使IE进入所谓的“符合标准”模式，而不是委婉的“怪癖”模式;
不要重复使用这样的左右类。它强制你使用只有IE7 +的子选择器，而且不需要它;
如果你的div只包含浮动，它的高度为0。你可以通过在它们下方放置一个0高度div来解决这个问题，其中“clear：both”或父级的“溢出：隐藏”;
摆脱align =“center”。那不标准。

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

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

等等。

Answer 3

首先我跳过所有

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

中心的技巧是（使用position：relative或position：absolute）将左边的点设置为宽度的一半，然后将边距移回元素宽度的一半（其中'element'是元素你想要居中）。

Answer 4

修改过的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;
    }

而不是这些类的ur c你试试这在IE和Firefox中工作得很好..

无法在Internet Explorer中左/右浮动为div工作

4 个答案: