javascript - 尝试对齐视频时的典型 IE 问题 - 请指教

有人能告诉我为什么这三个元素(视频+图像+视频)在每个接受 IE 的浏览器中都能完美对齐吗？

在 IE 中，它们相互堆叠。

提前谢谢大家。

<div style="float: left;"><iframe width="100" height="50" src="http://www.youtube.com/embed/lhNg7A88no8?rel=0" frameborder="0"></iframe></div>
<div style="float: left;"><img style="display: block; vertical-align: middle; margin-left: auto; margin-right: auto;" title="Example dataset from SmartScan" src="http://smartfibres.com/pictures/Example_Data_Set.jpg" alt="Example dataset from Smartscan" width="200" height="100" />
<style="text-align: right;"></div>
<div style="padding-top: 10px, float: left;"><iframe width="100" height="50" src="http://www.youtube.com/embed/2louwAc63pM?rel=0" frameborder="0"></iframe></div>

最佳答案

您正在使用 float 属性，但您还没有清除 float 。这可能是导致这些问题的潜在原因。我已经在以下 fiddle 中更新了您的代码，并且还取出了您的内联样式并将它们放在各种样式表中:

http://jsfiddle.net/efrSh/1/

没有别的CSS吗？在这种情况下，通常如果 3 个 div 的宽度 + 它们的填充大于包含的 div，就会发生这种情况。但是因为你没有其他代码，我只能假设你的 float 没有被清除。

进一步阅读可以找到here

关于javascript - 尝试对齐视频时的典型 IE 问题 - 请指教，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17719262/