您的位置：首页 > 其它

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

2011-03-12 15:52 399 查看

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

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航