3

我试图在电子邮件中放置一个 div，以便它溢出后来放置的内联块 div（而不是将它们向下推），因为有问题的 div 是 display:inline。它似乎在 Chrome 中工作，但我无法让它在 IE 中正确呈现，它受到稍后放置的内联块 div 的限制。

这是我正在谈论的一个示例（有问题的 div 具有蓝色背景）：

<html>
<head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
div {
    *display: inline!important;
    _height: 1px;
}
</style>
</head>
<body style="width: 300px; height: 300px;">
  <div style="margin: 0; padding: 0; font-size: 1px; display: block!important; width: 300px; height: 300px; background-color: green;">
    <div style="margin: 0; padding: 0; font-size: 1px; display: inline-block; width: 300px; height: 10px; background-color: gray;"></div>
    <div style="margin: 0; padding: 0; font-size: 1px; display: inline-block; width: 10px; height: 280px; background-color: gray;"></div>
    <div style="margin: 0; padding: 0; display: inline-block; width: 280px; height: 280px; background-color: red; line-height: 23px; font-family: Helvetica, Arial, FreeSans, san0serif; color: #333;">
      <div style="margin: 0; padding: 0; margin-top: 0; width: 150px; height: 320px; background-color: blue; display: block;"></div>
    </div>
    <div style="margin: 0; padding: 0; display: inline-block; width: 10px; height: 280px; background-color: gray;"></div>
    <div style="margin: 0; padding: 0; display: inline-block; width: 300px; height: 10px; background-color: gray;"></div>
  </div>
</body>
</html>

这就是它在 Chrome 中的呈现方式（以及我希望它呈现的方式）： 正确的

这是它在 IE(8) 中的呈现方式：

不正确

如何让 IE 像在 Chrome 中一样呈现这个 div？

4

2 回答 2

0

大多数电子邮件客户端不会 100% 始终如一地听 css。这在某种程度上也适用于 Web 客户端电子邮件视图。您需要将 2 个 div 从容器对象中分离出来。IE：两个单独的包含，所以当左边的一个溢出时 - 右边的 div 没有。

编辑：这是一个很好的兼容性地图： http: //www.campaignmonitor.com/css/

于 2012-05-15T18:37:46.923 回答
0

你试过浮动红色和蓝色的div吗？这会将它们从文档流中删除，如果相对定位和 z 索引正确，则应该按您想要的方式显示。

于 2012-05-15T19:38:18.283 回答