2
IEは私をクレイジーに駆り立てています。実際のアプリケーションでは、左側に画像があり、右側にいくつかのリンクがあり、その間に標準のテキストがあります。以下の例では、別のものの中に3つのdivがありますが、問題を示すだけで十分です。IE8：float inside li
この例は、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>
実際にIE8でjsfiddle http://jsfiddle.net/g8Y8V/でこれを試しました。すべてが期待どおりに機能しました。あなたは何をしようとしていますか？ – alonisser
http-equiv = "X-UA-Compatible" content = "IE = edge | metaタグを追加しようとしましたか？IEが最も高度なレンダリングエンジンでレンダリングするように強制しますか？ – alonisser
興味深いことに、jsfiddle.netバージョンは、 メタタグがようやくトリックをしました。ありがとうございました！ –