IE 中的 css 错误与 float:right 或类似答案

【问题标题】：css bug in IE with float:right or similarIE 中的 css 错误与 float:right 或类似
【发布时间】：2011-06-21 23:32:06
【问题描述】：

我有这个代码：

<body>

<ul style="padding:0px;margin:0px;list-style-type:none">
<li>
<div>
<img style="display:inline" src="asdf_files/eng.gif">&nbsp;
<img src="http://dl.dropbox.com/u/1663633/ita.gif">
<span style="float:right;width:80%;">
<a href="#">BLA BLA BLA BLA BLA</a>
</span>
</div>
</li>

</ul></body></html>

在 firefox 和 chrome 中，在 IE 7 和 8（我猜也是 6..）中很好（行对齐），BLA BLA 行没有对齐..

有什么想法吗？有关如何解决此问题的建议？

在这里试试：http://jsfiddle.net/TGGFh/

【问题讨论】：

你能做一个jsFiddle 或JS Bin 测试用例来显示问题吗？
其实一个
元素就足够找到bug了..

【解决方案1】：

仍然不清楚..为什么没有人理解这一点？ http://sscce.org/

你有一个文档类型作为第一行吗？如果没有一个，您将在Quirks Mode 中，并且您将拥有（我认为是您的）描述的所有版本 IE 中的行为。

如果您没有 doctype，请在第一行添加一个，例如 <!DOCTYPE html>。这将解决您在 IE9 和 IE8 中的问题。

这是你的 jsFiddle，它已经在 IE9/8 中运行良好：http://jsfiddle.net/TGGFh/
那是因为jsFiddle添加了一个doctype——查看源码：http://fiddle.jshell.net/TGGFh/show/light/

所以，我认为你的实际问题只在 IE7 中。

就修复 IE7 而言，最简单的修复方法是（在 HTML 中）将 span 和 float: right 移动到两个图像之前。

见：http://jsfiddle.net/TGGFh/4/

【讨论】：

（假装我大约十分钟前发布了这个，在你对文档类型发表评论之前）
抱歉，我在 jsFiddle 上添加了 doctype，也许它没有正确保存.. 无论如何感谢您的回答，这似乎是一个很好的解决方案..

【解决方案2】：

如果您想以表格方式显示数据，为什么不使用表格？

【讨论】：

不是重点.. 我想知道这是否是出于个人兴趣的错误 =)

【解决方案3】：

试试这个：http://jsbin.com/ajiqa5/3/

这是你的float:right;。它溢出了 div 并落在了新的一行上。我已经为 IE/Chrome 修复了它，但它应该适用于其他人。

【讨论】：