html - Chrome 错误 : css positioning incorrectly resizing container

Question

我在 jsfiddle 中有以下 HTML 和 CSS :

<div class="MyBox">

    <div class="TopText">text here</div>    
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="MyText">text</div>
    <div class="OtherText1">text1</div>
    <div class="OtherText2">text2</div>

​</div>

.MyBox{
    padding:10px 10px;
    position:absolute;
    margin:10px 0px;
    ​border:5px solid black;}

.TopText{clear:right;}

.MyText{
    float:left;
    margin:10px 10px;}

.OtherText1{
    clear:left;
    float:left;
    margin:10px 10px;}

.OtherText2{
    float:left;
    margin:10px 0px 10px 50px;}

MyBox类的div需要绝对定位。问题是，当我在容器 div 中没有 OtherText div 时，MyBox div 可以很好地调整自身大小，但如果我有这些 div，那么容器 div 似乎通过添加它们的宽度来调整自身大小。 这个问题似乎只在Chrome中可见，比较奇怪。

我该如何解决？

谢谢。

Answer 1

疯狂的技巧:将 float:left 添加到绝对定位的 MyBox 以获得额外的 shrinkwrap 功能:

http://jsfiddle.net/SyKfm/2/

.MyBox {
    position:absolute;
    float: left;

前几天有一道类似的题，不过有腹肌。定位的最大宽度 div:

Div smart width