IE6/7和IE8/9（怪异模式）浮动元素折行Bug

网页设计中，我们经常需要设置一个元素向左或向右浮动。如

<!DOCTYPE HTML>
<html>
<head>
	<title>IE6/7和IE8/9（怪异模式）浮动元素折行Bug</title>
	<meta charset="utf-8">
</head>
<body>
<div style="width:300px;border:1px solid gray;padding:5px;">
       <input type="text" />
       <a href="javascript://;" style="float:right;">搜索</a>		
</div>
</body> 
</html>

div中有个输入框和链接A，设置链接A向右浮动。各浏览器表现如下

IE6/7 & IE8/9(Quirks mode) :

IE8/9(standard mode) & Firefox/Safari/Chrome/Opera :


可以看到在IE6/7 & IE8/9(Quirks mode) 中，“搜索” 链接折行了，这不是我们想要的结果。解决方式，把Input元素和链接A位置调换。如 

<div style="width:300px;border:1px solid gray;">	
	<a href="javascript://;" style="float:right;">搜索</a>
	<input type="text" />
</div>

posted on 2011-03-12 15:52  snandy  阅读(2498)  评论(5)    收藏  举报