a标签在ie6和ie7下面换行显示问题解析
生活随笔
收集整理的這篇文章主要介紹了
a标签在ie6和ie7下面换行显示问题解析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
此問題為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，不難，但是開發大型的交互產品時這是個問題要特別注意。
轉載于:https://www.cnblogs.com/web-sheena/archive/2012/05/28/2522518.html
總結
以上是生活随笔為你收集整理的a标签在ie6和ie7下面换行显示问题解析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WinFrm程序使用的图片展示控件.带删
- 下一篇： myeclipse+8.6各个版本注册码