3

問題のdivがdisplay:inlineであるという事実により、後で配置されたインラインブロックのdivを(押し下げるのではなく)オーバーフローするように、電子メールにdivを配置しようとしています。Chrome では動作しているようですが、IE では正しくレンダリングできません。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) でのレンダリング方法は次のとおりです。

正しくない

Chrome のように IE でこの div をレンダリングするにはどうすればよいですか?

4

2 に答える 2

0

ほとんどの電子メールクライアントは、cssを100％一貫してリッスンしません。これは、Webクライアントの電子メールビューにもある程度当てはまります。2つのdivをコンテナオブジェクトから切り離す必要があります。IE：2つの別々の内容が含まれているため、左側の1つがオーバーフローした場合、右側のdivはオーバーフローしません。

編集：ここに良い互換性マップがあります：http：//www.campaignmonitor.com/css/

于 2012-05-15T18:37:46.923 に答える
0

赤と青の div をフローティングしてみましたか? これにより、ドキュメントの流れからそれらが削除され、相対的に配置され、z インデックスが適切に付けられている場合、必要に応じて表示されるはずです。

于 2012-05-15T19:38:18.283 に答える