Firefox弄亂裏面的span標籤。 Chrome，Opera和IE在正確顯示格式方面做得不錯。火狐的怪異行爲右對齊span裏面的標籤

我該如何解決這個問題。

這裏是我的代碼：

<div class="navcontainer"> 
<div class="nav"> 
    <ul> 
     <li><a href="#">Dropdown</a> 

      <ul> 
       <li><a href="#">One<span class="bubble-info">32</span></a> 

       </li> 
       <li><a href="#">Two<span class="bubble-warning">32</span></a> 

       </li> 
       <li><a href="#">Three<span class="bubble-danger">32</span></a> 

       </li> 
       <li><a href="#">Four<span class="bubble-success">32</span></a> 

       </li> 
       <li><a href="#">Five<span class="bubble-default">32</span></a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

這裏是我的小提琴http://jsfiddle.net/TgD65/1/

來源

2014-03-19 Madi Fersi

其實很簡單。當你設置一個要浮動的元素時，你需要在其他元素之前放置它。

瀏覽器首先放置浮動元素，然後放置其餘元素。

因此，在你裏，如果你有：

<a href="#"><span class="bubble-info">32</span>One</a>

它會在所有的瀏覽器。

http://jsfiddle.net/TgD65/5/

來源

2014-03-19 11:31:40 brian

@Madi，

你必須定義position:absolute;在Bubbles classes這裏是Demo。

.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning { 
    width: 20px; 
    height: 20px; 
    float: right; 
    text-align: center; 
    color: #000000; 
    font-weight: bold; 
    position:absolute; right:0; top:0; /*Added this line*/ 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #000; 
} 

.nav ul a { 
    display:inline-block; 
    position:relative; /*Added this line*/ 
    padding:10px; 
}

來源

2014-03-19 11:28:16

使用white-space:normal嘗試爲.nav ul ul a

來源

2014-03-19 11:28:49 James

Demo Fiddle

變化

.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {

的CSS來：

.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning { 
    width: 20px; 
    height: 20px; 
    display:inline-block; 
    position:absolute; 
    right:0; 
    text-align: center; 
    color: #000000; 
    font-weight: bold; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #000; 
}

並添加position:relative;到.nav ul ul li li {

這樣做是替換絕對定位氣泡的相對位置，並給他們的塊級特性，使他們能夠給予right:0;是右對齊。它也刪除了浮動，以避免任何相關問題，而不是在項目之間清除它。

來源

2014-03-19 11:31:18 SW4

火狐的怪異行爲右對齊span裏面的標籤

回答

Demo Fiddle

相關問題