0

例子

如果父元素的相邻元素浮动，则父元素感觉不到元素的宽度，如果是动态的。在 chrome 和 opera 中工作正常。

<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;
}
4

2 回答 2

0

只需添加此 Firefox 异常

@-moz-document url-prefix() {
.b-wrap{width:175px;}
}
于 2013-03-30T14:44:19.590 回答
0

Firefox 计算包含浮动元素的元素的宽度与 Chrome 不同。我不知道为什么。

但是，似乎正在发生的事情如下。

代码段中的实际内容是 in b-child-cont，一个非浮动元素。b-child-cont确定宽度，b-content因为其他两个元素是 (b-rect-left和b-rect-right) 是浮动的，并且不会影响确定内容的宽度。反过来， 的宽度b-content设置 的宽度b-wrap，因为b-wrap是浮动的，并采用其子元素的宽度。

You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.

(1) Add left and right margins to b-child-cont:

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

(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.

(2) You can also specify a with to the parent element containing the floats:

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

In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.

You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.

Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73

于 2013-03-30T15:11:32.703 回答