Question

我知道IE有时是不可能的。我有6个div与右边对齐，使用float。以下是代码：http://jsfiddle.net/jcay3/1/。问题是，在IE中，它位于条形图之下，它应该被定位。

有什么解决方案吗？我听说很多开发人员都在谈论评论，尤其是IE。他们会解决这个问题吗？我在兼容模式（IE9）中尝试过它。如果在IE 6中它被正确呈现并且在IE 7中出错怎么办？我应该只为IE 7添加特殊代码吗？或者没有这样的风险？

还有其他解决方案吗？一个更简单的？谢谢

Answer 1

你的问题是img标签如果你摆脱它，div将是他们所属的地方如果可以，将img放入div中。

Answer 2

你不应该相信兼容模式恕我直言。如果您使用IE9操作系统，则只有MS virtual machines with one different IE in each one 我已经看到（我的同事已经看到）IE8-as-IE7，IE测试器等不存在的错误

是的，它们非常庞大，但它可以帮助您节省数小时调试不存在的错误。（旧）IE已经有足够的真正的错误了！ ;）

至于你的问题，它存在于IE6和IE7中，我可以用img { float: left; }来解决它，但我不能确定它是最好的解决方案。

Answer 3

IE条件标签可以提供帮助，但我不认为您的问题是由IE漏洞造成的。

容器overflow: hidden上的差异为.menuBar，这会导致元素自行清除浮动元素。

我还修改了高度以适应边框，并将.menuBarContainer元素设置为100％宽度，以防止它溢出JSFiddle。

我没有在这台机器上运行IE，但我很确定这将至少可以在IE7上运行。如果我错了，请告诉我，我会再次看一下。

Answer 4

要在旧的Internet Explorer版本上正确显示以及更好的跨浏览器支持，您需要浮动相反的元素：

请参阅此working Fiddle示例！

添加此CSS

.menuBar .menuBarContainer img {
    float: left;
}

此外，您需要考虑一个只包含浮动元素的元素将在height中崩溃，因为子浮动元素不再位于普通文档流中。

这意味着您的.menuBarContainer将没有height，从而导致其后的元素出现视觉问题。解决此问题的最佳方法是在关闭此元素之前使用CSS clear：

<强> CSS

.clear {
    clear:both;
}

这意味着.menuBarContainer的下边框将位于浮动元素占据的空间之后，允许.menuBarContainer保持其高度，确保正常的文档流。

作为旁注，你的小提琴示例还有一个额外的结束</div>。