Question

IE再一次让我发疯。在实际的应用程序中，我希望左侧有一个图像，右侧有一些链接，中间有标准文本。下面的示例在另一个示例中只有3个div，但它足以显示问题。

该示例具有相同构造的2倍。有一次裸露，一次封装在一个列表中。 Firefox显示

|Left text|Center text<-->|Right text|

，列表缩进，但通常是相同的。

IE8对于裸构造显示相同的内容。但是对于封装的代码，事情就会出错：

|Left text|<-->|Right text|
|Center text<-->          |

上部间隙为黄色，即包含div。

对我来说，CSS行为并不总是直观的，我想知道下面的代码是否与任何标准相冲突。如果它足够符合，有没有办法帮助IE8按预期呈现它？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Float Test for IE</title>
 <style>
  .meta-left {
    float: left;
    background-color: red;
  }
  .meta-right {
    float: right;
    background-color: blue;
  }
  .meta {
    background-color: green;
  }
  .meta-container {
    background-color: yellow;
  }
  ol {
    clear: both;
    list-style: none;
  }
  p {
    padding: 0;
    margin: 0;
  }
 </style>
</head>
<body>
 <div class="meta-container">
  <div class="meta-left">
   <p>Left text</p>
  </div>
  <div class="meta-right">
   <p>Right text</p>
  </div>
  <div class="meta">
   <p>Center text</p>
  </div>
 </div>
 <ol><li>
  <div class="meta-container">
   <div class="meta-left">
    <p>Left text</p>
   </div>
   <div class="meta-right">
    <p>Right text</p>
   </div>
   <div class="meta">
    <p>Center text</p>
   </div>
  </div>
 </li></ol>
</body>
</html>

Answer 1

尝试添加http-equiv="X-UA-Compatible" content="IE=edge"元标记？强制IE使用它最先进的渲染引擎进行渲染

Answer 2

您是否尝试过浮动中心文字？ IE可能正在做某事，因为它不知道在哪里放它。另外，IE是垃圾！：）

IE8：浮在里面

2 个答案: