一對在Firefox上環繞的div

Question

我創建了一個包含一些圖像鏈接的框，目前我在Chrome和Safari上看到了很棒的東西，但是在Firefox的默認縮放級別上進行了換行。放大使框看起來很好，但在正常的縮放級別，它們被包裹起來。下面是它看起來像通常情況下，在Chrome：

...，這是它的外觀上的Firefox：

關於這個奇怪的是，在右邊的框中沒有完全包裹：一些頂部和底部的邊界在第一行是可見的，我無法理解它在這個特定點包裹的原因。這是HTML的樣子：

<div class="clearfix buyTrackContainer"> 
<div class="buyTrackBox"> 
    <p>Buy this Track</p> 
    <div class="buyLinksBox"> 
     <div class="buyLinksBoxLeft"> 
      <a href="{{ buylink-itunes }}" target="_blank"><div class="d-itunes"></div></a> 
     </div> 
     <div class="buyLinksBoxRight"> 
      <a href="{{ buylink-amazon }}" target="_blank"><div class="d-amazon"></div></a> 
     </div> 
    </div> 
</div> 
<div class="buyTrackBox"> 
    <p>Buy on Vinyl/CD</p> 
    <div class="buyLinksBox"> 
     <div class="buyLinksBoxLeft"> 
      <a href="{{ buylink-ebay }}" target="_blank"><div class="b-ebay"></div></a> 
     </div> 
     <div class="buyLinksBoxRight"> 
      <a href="{{ buylink-amazon }}" target="_blank"><div class="b-amazon"></div></a> 
     </div> 
    </div> 
</div> 

...和有關CSS如下：

.buyTrackContainer { 
    text-align: center; 
} 
.buyTrackBox { 
    display:inline-block; 
    border:1px solid #ddd; 
    padding-left: 3px; 
    padding-right: 3px; 
    padding-top: 1px; 
    padding-bottom: 5px; 
    width:46%; 
    text-align:left; 
    background-color: #fff; 
    border-radius: 3px; 
    border-bottom:3px solid #ddd; 
} 
.buyLinksBoxLeft { 
    display:inline; 
    border: 1px solid #ddd; 
    border-bottom: 3px solid #ddd; 
    border-radius: 3px 0px 0px 3px; 
    padding: 12px 4px 8px 8px; 
    text-align:center; 
    vertical-align:center; 
    background-color:#fff; 
} 
.buyLinksBoxRight { 
    display:inline; 
    border: 1px solid #ddd; 
    border-bottom: 3px solid #ddd; 
    border-radius: 0px 3px 3px 0px; 
    border-left:0px; 
    padding: 12px 8px 8px 4px; 
    text-align:center; 
    vertical-align:center; 
    background-color:#fff; 
} 
.buyLinksBox { 
    display:block; 
    text-align:center; 
    padding-bottom:10px; 
    padding-top:8px; 
} 
div.d-itunes { 
    display:inline-block; 
    margin-left:0px; 
    width:50px; 
    height:17px; 
    background:url(/images/misc/iTunes-buy-button.png) no-repeat; 
} 
div.d-amazon { 
    display:inline-block; 
    margin-left:0px; 
    width:50px; 
    height:17px; 
    background:url(/images/misc/Amazon-buy-button.png) no-repeat; 
} 
div.b-ebay { 
    display:inline-block; 
    margin-left:0px; 
    width:50px; 
    height:17px; 
    background:url(/images/misc/eBay-buy-button.png) no-repeat; 
} 

我是比較新的正確的CSS的設計，所以我想感謝任何關於如何改進我的編碼風格的指針。有誰知道這裏可能會發生什麼，可能會導致這種情況？

Answer 1

生病嘗試與第一容器改變以下內容添加到

.buyTrackBox { 
white-space:nowrap 
} 

.buyLinksBoxLeft { 
float:left; 
} 

.buyLinksBoxRight { 
float:right; 
} 

更在嘗試分裂的buyLinksBoxLeft和buyLinksBoxRight寬度百分比，以適應屆父容器的一些東西左右40%可以這樣做。做同樣與buyLinksBox股利和兒童

Answer 2

你的課， 'buyLinksBoxLeft' & 'buyLinksBoxRight' 變化

display: inline; 

到

display: inline-block; 

小提琴：http://jsfiddle.net/aqAVy/

這應該排序出來。

Answer 3

1. 避免名稱冗餘......例如：改變.BuyLinksBoxRight（的.BuyLinksBox兒子），只是.right（同樣與.left）

2. 當多個項目有很多共同的屬性，它們組合在一個共同的選擇。

3. 如果可以，請使用線條填充和邊框。

代碼將更具可讀性，問題將消失。

Running Demo

.buyTrackContainer { 
    text-align : center; 
} 

.buyTrackContainer > div, 
.buyLinksBox > div { 
    display : inline-block; 
    border : 1px solid #ddd; 
} 

.buyTrackBox {  
    background-color : #fff;   
     border-bottom : 3px solid #ddd; 
     border-radius : 3px; 
      text-align : left; 
      padding : 1px 3px 5px 3px; 
       width : 134px; 
} 

.buyLinksBox {   
    padding-bottom : 10px; 
     padding-top : 8px; 
     text-align : center; 
} 

.buyLinksBox > div { 
    background-color : #fff; 
     vertical-align : center;    
     border-bottom : 3px solid #ddd; 
      text-align : center; 
} 

.buyLinksBox > .left { 
    border-radius : 3px 0px 0px 3px; 
      padding : 12px 4px 8px 8px; 
} 

.buyLinksBox > .right { 
    border-radius : 0px 3px 3px 0px; 
     border-left : 0px; 
      padding : 12px 8px 8px 4px; 
} 

.buyLinksBox > div > a > div { 
    margin-left : 0px; 
     height : 17px;  
      width : 50px;   
} 

div.d-amazon, div.b-amazon { 
    background : url(/images/misc/Amazon-buy-button.png) no-repeat; 
} 

div.d-itunes { 
    background : url(/images/misc/iTunes-buy-button.png) no-repeat; 
} 

div.b-ebay { 
    background : url(/images/misc/eBay-buy-button.png) no-repeat; 
}