IE7中的內嵌塊容器內的100％寬度塊

我遇到了IE7問題。內聯塊塊容器內的塊元素未被拉伸以適合容器寬度。IE7中的內嵌塊容器內的100％寬度塊

代碼：

<div class="a"> 
    <div class="b"></div> 
    <div class="c"></div> 
</div> 

.a { 
    border: 5px solid blue; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 
.b { 
    width: 500px; 
    height: 10px; 
    background: green; 
} 
.c { 
    height: 10px; 
    background: red; 
}

這裏被期望的行爲出現在其他瀏覽器： enter image description here

以下是我在IE7有： enter image description here

例子： http://jsfiddle.net/Lnfwezm4/5/

直接鏈接： http://fiddle.jshell.net/Lnfwezm4/5/show/

如何在IE7中實現紅色塊以適應父寬度（IE6會很棒）？

來源

2014-10-06 panfil

加入顯示：塊;以.b和.c和寬度：500px;到.c作品？ – Monte 2014-10-06 17:39:19

@Monte，不能那樣做。那就是問題所在。 – panfil 2014-10-06 21:38:13

添加任何寬度。一個會解決這個問題：

.a { 
    border: 5px solid blue; 
    display: inline-block; *display: inline; zoom: 1; 
    width: 500px; 
}

讓我們來看看什麼是引擎蓋下發生。你有一個塊元素，默認寬度爲父元素寬度的100％。 .c的父元素是.a，它沒有寬度（或者隱式設置爲100％，也不是其他任何寬度），而寬度取決於它的子元素...所以，未定義的100％是未定義的，或者在這種情況下，0px; （我有意地簡化了一些東西）

在我看來，讓IE7知道如何計算.c的寬度的唯一方法就是給一些寬度.a（不一定是固定的，也可以是％或其他單位）。

如果您由於任何原因無法給出.a的任何寬度，請告訴我們爲什麼以及您想要做什麼。有一個很好的機會，它可以通過稍微不同的標記來實現。

來源

2014-10-06 18:17:34

我無法將固定寬度設置爲「.a」。在我的情況下，我嘗試將容器拉伸到其內容的寬度，即500px，「.b」塊的寬度。我希望同一容器中的其他塊元素可以伸展到其寬度的100％。我在其他瀏覽器中看到的這種行爲，但不是IE7。我可以理解爲什麼IE計算寬度的方式，但不知道如何使它在這種情況下像其他瀏覽器一樣工作。此外，我不能使用positioinig來實現這一點，因爲在容器中可以有多個「.c」塊，所以我需要它們在「.b」的正常流程中。有沒有辦法讓那個沒有js？ – panfil 2014-10-06 21:34:12

IE7中的內嵌塊容器內的100％寬度塊

回答

相關問題