我试图在电子邮件中放置一个 div，这样它就会溢出后来放置的内联 block div(而不是将它们向下推)，因为所讨论的 div 是显示:内联。它似乎在 Chrome 中工作，但我无法让它在 IE 中正确呈现，它被稍后放置的内联 block 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？
最佳答案
大多数电子邮件客户端不会 100% 始终如一地收听 css。这在某种程度上也适用于 Web 客户端电子邮件 View 。您需要将 2 个 div 与容器对象分离。 IE:两个单独的包含所以当左边的一个溢出时 - 右边的 div 没有。
编辑:这是一个很好的兼容性图:http://www.campaignmonitor.com/css/
关于html - 如何让 div 溢出而不将 IE 中的电子邮件中的其他内容向下推？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10606746/