html - 简单的 html div 内衬 "bug"

Question

所以我有这个相当奇怪的问题，我正在尝试排列一些 divs但我遇到了这个奇怪的问题。比方说，如果我把 <input type="checkbox" />在一个 div 内，并尝试将它与其他 div 排在同一行，无论我尝试什么都行不通，但是如果我向第二个 div 添加一些文本，它突然开始工作，为什么会这样？

这里是我的代码示例，使事情更清楚:http://jsfiddle.net/wxgVw/2/

<div id="container">
    <div id="container2">
        <div id="left">
            <input type="checkbox" />
        </div>
        <div id="right">

        </div>
    </div>
</div>

body{
    margin:50px;
}

#container{
    width:770px;
    height:400px;
    border:1px solid red;
}

#container2{
    width:700px;
    height:50px;
    margin:10px;
    outline:1px solid red;
    padding:10px;
}

#left{
    width:30px;
    height:30px;
    outline:1px solid green;
    display:inline-block;
    zoom:1;
    *display:inline;
}

#right{
    width:400px;
    height:30px;
    outline:1px solid black;
    display:inline-block;
    zoom:1;
    *display:inline;
}

Answer 1

每当您使用 display: inline-block 时，最好同时指定 vertical-align: top(或 bottom，具体取决于在你想要什么)。这样可以避免这个问题。