html div IE 8 VS 2010搞砸了

时间:2013-07-29 17:03:42

标签: html css visual-studio-2010

下面的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>

1 个答案:

答案 0 :(得分:1)

以下是如何在不使用floatpositioning的情况下实现它:

我的所有孩子 div都有:

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

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

JSFiddle