a标签在ie6和ie7下面换行显示问题解析 此博文包含图片(2012-05-08 16:39:22)转载▼标签： 杂谈分类： html css此问题为ie6和ie7的一个bug，在ie其他的版本或者
a标签在ie6和ie7下面换行显示问题解析 此博文包含图片 (2012-05-08 16:39:22)转载▼标签： 杂谈 分类： html css此问题为ie6和ie7的一个bug，在ie其他的版本或者ff，maxthon、chrome下都为正常的。只要是非浮动元素在浮动元素之前，并且是同行的时候，这个问题就会出现， ie6、ie7效果一致： 截图如下：a标签在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>
可以测试下，ie6和ie7效果如下：a标签在ie6和ie7下面换行显示问题解析这个经典bug，不难，但是开发大型的交互产品时这是个问题要特别注意。
