火狐：家長不感覺到動態內容寬度

Question

Example

如果父浮動的相鄰元件，父不會感覺到元件的寬度，如果是動態的。在鉻和歌劇作品罰款。

<div class="b-wrap"> 
    <div class="b-content"> 
     <div class="b-rect-left"></div> 
     <div class="b-rect-right"></div> 
     <div class="b-child-cont">джигурдаололо</div> 
    </div> 
</div> 

.b-wrap { 
    background-color: red; 
    height: 50px; 
    float: left; 
} 

.b-content { 
    margin: 5px; 
    overflow: hidden; 
} 

.b-rect-left { 
    width: 40px; 
    height: 40px; 
    float: left; 
    background-color: orange; 
} 

.b-rect-right { 
    width: 30px; 
    height: 30px; 
    float: right; 
    background-color: green; 
} 

.b-child-cont { 
    overflow: hidden; 
} 

Answer 1

火狐計算的元素包含浮動不同於Chrome的寬度。我不知道爲什麼。

但是，似乎正在發生的是以下內容。

程式碼中的實際內容是b-child-cont，非浮動元素。 b-child-cont確定了的寬度，因爲其他兩個元素（b-rect-left和b-rect-right）都是浮動的，並且不考慮確定內容的寬度。依次，的寬度設置爲b-wrap的寬度，因爲b-wrap已浮動並且具有其子元素的寬度。

您作爲設計師和開發人員，需要爲兩個浮動元素留出一些空間。你可以用很多方式來做到這一點。我將舉兩個例子。

（1）添加左右邊距到b-child-cont：

.b-child-cont { 
    overflow: hidden; 
    background-color: yellow; 
    margin-left: 40px; 
    margin-right: 30px; 
} 

（注意：我添加了一個背景色來顯示延長元件的）的40像素和30像素值是基於的寬度左邊和右邊的方形元素。

（2）還可以與含有浮標的父元素指定一個：

.b-child-cont { 
    overflow: hidden; 
    background-color: yellow; 
    text-align: center; 
} 
.b-content { 
    width: 30em; 
} 

在這種情況下，我設置與到30em（可以相應地調整此）和I爲中心文字在b-child-cont。

您遇到了CSS盒模型計算方式中的跨瀏覽器差異。一旦你意識到這一點，你需要圍繞它進行設計，但這並不難。

小提琴參考：http://jsfiddle.net/audetwebdesign/dzK73

Answer 2

只需添加這個Firefox例外

@-moz-document url-prefix() { 
.b-wrap{width:175px;} 
}