Question

下面的html看起来好像我想在VS 2010设计视图中看到它，但是当我运行它并在IE 8中打开它时，它们全都搞砸了。蓝色和黄色是我所期望的，但红色是蓝色的1/2，而橙色是在最左下方。我在这里缺少什么？

<div style="background-color: Aqua; height: 195px; width: 800px;">

    <div style="background-color: Yellow; display: inline-block; width: 18%; height: 100%; margin: 0px 5px 0px 0px;">
        <!--Freq holder-->
        <fieldset style="height:85%;">
            <legend>Frequency</legend><br />
            <input type="radio" name="freq" value="Daily" />Daily<br /><br />
            <input type="radio" name="freq" value="Weekly" />Weekly<br /><br />
            <input type="radio" name="freq" value="Monthly" />Monthly
        </fieldset>
    </div>

    <div style="background-color: Red; display: inline-block; width: 32%; height: 100%; margin: 0px 5px 0px 0px;">
        Date holder
    </div>

    <div style="background-color: Orange; display: inline-block; width:48%; height: 100%;">
        Repeat holder
    </div>

</div>

Answer 1

以下是如何在不使用float或positioning的情况下实现它：

我的所有孩子 div都有：

.inline{
    display:inline-block;
    vertical-align:top; /* to put the divs top */
}

使用font-size:0 父容器删除 divs 之间的空格。

JSFiddle

html div IE 8 VS 2010搞砸了

1 个答案: