无法让左/右浮动以适用于 Internet Explorer 中的 div

https://stackoverflow.com/questions/1443007

22-07-2019
|

题

这是 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>

和样式.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 的样式的提示的人点赞。

解决方案

可能是因为不限定一个DOCTYPE和IE在怪异模式查看网页作为放在附近，以标准模式（或几乎标准）。

我已经检查您的网站在标准模式和IE7的2列的行为，因为他们应该（像FF和铬）

其他提示

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

在文档中添加 DOCTYPE（例如 Transitional HTML 4.01）。这迫使 IE 进入所谓的“标准兼容”模式，而不是委婉的“怪癖”模式；
不要像这样重用左右类。它强制您使用仅 IE7+ 的子选择器，并且没有必要；
如果你的 div 只包含浮动元素，那么它的高度将为 0。您可以通过在其下方放置一个 0 高度的 div 并使用“clear:”来解决此问题两者都在其上或溢出：隐藏”在父级上；
摆脱对齐=“中心”。那不是标准的。

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

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

等等。

首先我跳过所有

div#main-header-content > div.left

和与替换

div#main-header-content div.left

，因为它们不工作在IE6。

其次，我会使用

div.right {
    float: left;
}

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

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

诀窍中心是（使用位置：相对或位置：绝对）左点设定为宽度的一半，然后将余量回元件宽度的一半（其中“元素”是元件要居中）。

改性的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太..

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow