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，不难，但是开发大型的交互产品时这是个问题要特别注意。
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
