html - IE中DIV的位置错误

Question

我知道IE有时是不可能的。我有 6 个 div 向右对齐，使用浮点数。这是代码：http: //jsfiddle.net/jcay3/1/。问题是，在 IE 中，它位于栏的下方，应将其定位到该栏。

有什么解决办法吗？我听到很多开发人员谈论评论，尤其是针对 IE 的评论。他们会解决问题吗？我在兼容模式（IE9）下试了一下。如果在 IE 6 中正确呈现而在 IE 7 中呈现错误怎么办？我应该只为 IE 7 添加特殊代码吗？还是没有这种风险？

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

Answer 1

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

Answer 2

您不应该相信兼容模式恕我直言。如果您的操作系统具有 IE9，则只有每个具有不同 IE 的 MS 虚拟机是可以的。
我已经看到（错误的是我的同事已经看到）IE8-as-IE7、IE Tester 等不存在的错误

是的，它们很大，但它可以让您免于调试不存在的错误数小时。（旧）IE 中已经有足够多的真正错误！;)

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

Answer 3

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

试试这个变化：http: //jsfiddle.net/jcay3/5/

不同之处在于overflow: hidden容器上的一个.menuBar，它会导致一个元素自我清除浮动元素。

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

我没有在这台机器上运行 IE，但我很确定这至少可以向后运行到 IE7。让我知道我是否错了，我会再看一遍。

Answer 4

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

请参阅此工作小提琴示例！

添加这个 CSS

.menuBar .menuBarContainer img {
    float: left;
}

此外，您需要考虑一个只包含浮动元素的元素将折叠在 中height，因为子浮动元素不再在正常的文档流中。

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

CSS

.clear {
    clear:both;
}

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

---

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