您的位置：首页 > 其它

a标签在ie6和ie7下面换行显示问题解析

2012-05-28 21:35 316 查看

此问题为ie6和ie7的一个bug，在ie其他的版本或者ff，maxthon、chrome下都为正常的。
只要是非浮动元素在浮动元素之前，并且是同行的时候，这个问题就会出现， ie6、ie7效果一致，
可以看到不在同一行现实，像是被挤下来了一样。代码是这样的
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.aa{float:right;width:50px;height:20px;diaplay:block;color:#096;}
</style>
<body>
<div style="width:300px;height:20px;color:#096;">
<span>2012.05.8</span>
<a href="###" class="aa">回复</a>
<a href="###" class="aa">删除</a>
</div>
</body>
</html>

解决办法有两个：
1、改变非浮动元素和浮动元素的位置，将浮动元素放在前面。像这样：

<div style="width:300px;height:20px;color:#096;">
<a href="###" class="aa">回复</a>
<a href="###" class="aa">删除</a>
<span>2012.05.8</span>
</div>
2、给非浮动元素也加上浮动，加上 span{float:left;}
<html>
<head>
<title>无标题文档</title>
</head>
<style type="text/css">
.aa{float:right;width:50px;height:20px;diaplay:block;color:#096;}
span{float:left;}
</style>
<body>
<div style="width:300px;height:20px;color:#096;">
<span>2012.05.8</span>
<a href="###" class="aa">回复</a>
<a href="###" class="aa">删除</a>
</div>
</body>
</html>

这个经典bug，不难，但是开发大型的交互产品时这是个问题要特别注意。

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

标签：

相关文章推荐

新的分享

章节导航