蘑菇小姐会开花

解决ie6、ie7下float:right换行的问题

IE7总是可以给人惊喜

html结构如下:

1
2
3
4
<div class="link-wrap">
<a id="forget-pwd" href="./plugins/shunde/forget_password.html">忘记密码</a>
<a id="register" href="./plugins/shunde/register.html">申请注册</a>
</div>

css样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.link-wrap {
width: 240px;
font-size: 14px;
position: absolute;
bottom: 25px;
}

.link-wrap a {
text-decoration: underline;
color: #4E8CB1;
}

#register {
float: right;
}

chrome及其它浏览器中的显示:
chrome
IE7中的显示:
IE7
在一行足以放下所有元素的情况下,float:right的元素在IE7中出现了换行的问题。

how to fix?

我用了一个最简单的方法,css样式不变,只要把float的元素放到非float的前面即可。
如下:

1
2
3
4
<div class="link-wrap">
<a id="register" href="./plugins/shunde/register.html">申请注册</a>
<a id="forget-pwd" href="./plugins/shunde/forget_password.html">忘记密码</a>
</div>

参考文章

http://stackoverflow.com/questions/4797573/float-right-in-ie7-dropping-to-a-new-line
http://w3help.org/zh-cn/causes/RM8005

坚持原创技术分享,您的支持将鼓励我继续创作!