如何在填充更改時讓Chrome調整此div的大小？

更新：在小提琴添加CSS過渡，以使其更清晰如何在填充更改時讓Chrome調整此div的大小？

當填充是從通過JavaScript這個div刪除，Chrome不調整內容以適應（即紅格不覆蓋黃色，它保持相同的大小）： http://jsfiddle.net/XDchs/4/

同樣，如果補上空白，內容推股利之外： http://jsfiddle.net/XDchs/3/

火狐調整大小爲我所期待。有誰知道爲什麼，以及如何解決它？

HTML：

<div id="outer"> 
    <div id="inner"> 
    <div id="content">blah</div> 
    </div> 
</div>

CSS：

#outer { 
    background-color:blue; 
    width:300px; 
    margin:0 auto; 
} 
#inner { 
    padding-left:100px; 
    margin:2px; 
    background-color:yellow; 
    -webkit-transition:padding-left 2s; 
    -moz-transition:padding-left 2s; 
} 
#inner.no-padding { 
    padding-left:0; 
} 
#content { 
    background-color:red; 
}

的JavaScript：

$(document).ready(function() { 
    $("#inner").addClass("no-padding"); 
});

來源

2013-01-18 David Minor

目前尚不清楚你正在努力實現 –

@Alex這是完全清楚。嘗試設置無填充樣式。 Chrome似乎表現不正確。好問題。 +1 – NGLN

當我將jsFiddle上的Javascript註釋掉並再次運行該腳本時，它確實是它應該在Chrome 24上執行的操作。火狐17上的相同行爲。 –

我結束了通過添加CSS類後的內容的寬度通過JavaScript設置爲100％解決這個：http://jsfiddle.net/XDchs/6/

$("#content").width("100%");

我找不到完全工作一個CSS的解決方案。

另外，我提起這爲Chrome錯誤：https://code.google.com/p/chromium/issues/detail?id=171060

來源

2013-01-21 16:51:51

如果你只給''no-padding'類'width：100％'，你的解決方案會表現得更好。另外你可以使用'box-sizing：border-box;' – meo

我在另一個答案中提到，由於盒子模型的原因，這不起作用 - 總寬度變爲100％加上邊距，所以右邊的藍色得到掩蓋了。如果你的意思是別的，你可以用小提琴演出嗎？ –

我不知道爲什麼Chrome似乎不正確的行爲，但可以解決與復位寬度：

#inner.no-padding { 
    padding-left:0; 
    width: 100%; 
}

來源

2013-01-18 18:30:25 NGLN

這很接近，但右邊距被掩蓋了（由於我假設的框模型）。有趣的是，如果我擺脫了保證金，解決方法不再有效。 –

如何在填充更改時讓Chrome調整此div的大小？

回答

相關問題