cle*_*tus 4 html css internet-explorer cross-browser
昨天有人问Width吸收HTML元素.我提出了两个解决方案:一个基于表和一个纯CSS.现在,纯CSS一体机在Firefox和Chrome中运行良好,但在IE中则不行.
基本上浮子正被撞到下一行.这是我的理解(以及FF和Chrome的行为),这不应该是这种情况,因为左边的div是块级元素,浮动应该基本上忽略.
完整的代码示例如下.添加DOCTYPE以强制IE进入符合标准的模式有一点帮助,但问题仍然存在.
所以我的问题是:我是否误解了我对浮动的理解,还是IE的问题？
更重要的是,我如何让它在IE中工作？这一直困扰着我.
<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>