帶文本+ IE9元素浮動右元素

我有一個鏈接元素，它旁邊有一個右浮動圖標的問題。在FF/Chrome中一切看起來不錯，但在IE9中，文本位於容器的底部，而不是垂直對齊。帶文本+ IE9元素浮動右元素

<a href="#" role="button" data-toggle="modal" class="login"> 
    Login <span class="icon-login"></span> 
</a> 

.login { 
    line-height: 40px; 
    height: 40px; 
    margin-top: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
    float: right; 
} 

.icon-login { 
    display: inline-block; 
    line-height: 40px; 
    height: 40px; 
    width: 40px; 
    float: right; 
    padding: 0; 
    margin: 0 0 0 20px; 
}

它應該如何看（綠色的是圖標的開始） enter image description here

IE9 enter image description here

任何想法？

來源

2013-02-28 Per Holmäng

看起來像float問題。

嘗試在div和float之內將Login文本包裝到left。

來源

2013-02-28 11:56:49 dotty

是的，我希望避免添加額外的標記，但似乎這是唯一的解決方案。謝謝！ – 2013-02-28 12:50:32

沒問題每:) :) – dotty 2013-03-01 12:07:32

我認爲你可以用下面的方式來處理。

<a href="#" role="button" data-toggle="modal" class="login"> 
    Login 
</a> 

.login { 
    line-height: 40px; 
    height: 40px; 
    margin-top: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
    float: right; 
    background: url(icon-login.png) right center; 
    padding-right:40px; 
}

來源

2013-02-28 12:01:24 Ankit

是的，這將工作，但我更喜歡使用相同的標記爲我們在整個網站使用的圖標。雖然謝謝！ – 2013-02-28 12:49:42

帶文本+ IE9元素浮動右元素

回答

相關問題