Question

我有一个JSP代码，在div标签及其关联的CSS中包含标签和输入字段。这些字段的对齐在IE9 +中看起来很好，但在IE7中则不然。

左边的div稍高，右边的div很低。我们也必须支持较低的IE版本。

JSP代码： -

<form:form...>
<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Name:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>
</form:form>

CSS： -

DIV.outer-left-bm {
    width:50%;
    float: left;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    float: right;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
}

感谢任何帮助。

更新： -

<form:form>
<DIV style="font-size: 0;">
<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
    <DIV class="outer-left-bm">Name:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>

CSS： -

DIV.outer-left-bm {
    width:49%;
    display: inline-block;
    min-height: 0;
    vertical-align: top;
    border: 1px;
    font-size: 13px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    display: inline-block;
    min-height: 0;
    vertical-align: top;
    border: 1px;
    font-size: 13px;
    text-align: left;
    margin-bottom: 8px;
}

UPDATE2：

DIV.outer-left-bm {
    width:49%;  
    min-height: 0;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
DIV.outer-right-bm {
    width: 50%; 
    min-height: 0;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Answer 1

考虑使用display: inline-block代替float。用于删除容器的块font-size: 0之间的空格，以及outer-left-bm等嵌套块的像素字体大小。

FORM {
    font-size: 0;
}

FORM DL,
FORM DT,
FORM DD {
    margin: 0;
    padding: 0;
}

FORM DT,
FORM DD {
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    width: 49%;
}

/* Inline-block for IE7: */
*+HTML FORM DT,
*+HTML FORM DD {
    display: inline;
    min-height: 0;
}

<form>
    <dl>
        <dt>Location:</dt>
        <dd><select><option>Hello</option></select></dd>

        <dt>Name:</dt>
        <dd><input name="example" /></dd>
    </dl>
</form>

请注意，要在IE7中模拟display: inline-block，需要使用display: inline（如我的代码示例中）或min-height: 0之类的hasLayout-toggler {/ 1}}。

但实际上，对于您的情况，正确标记的表格足够且完全是语义的（请注意使用zoom: 1元素和TH属性）：

scope

我们也必须支持较低的IE版本。

你确定真的必须吗？您是否了解IE7目前的市场份额？你生活在平行的现实中吗？ ;-)提示：目前唯一的版本至少是IE9 +。

Answer 2

您可能希望为Internet Explorer 6和Lower使用单独的样式，下面是使用条件样式表的代码，将其放在其他链接样式表下面，因此这个IE6和Lower样式表会覆盖任何CSS你已经申请了。

<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Answer 3

clear:both上的.outer-left-bm css属性应足以使div正确对齐。

例如，请参见下面的链接。在两个div上添加了背景颜色，因此我们可以看到它们堆叠的位置以及边界的位置。

Div align JS Fiddle

DIV CSS在较低的IE版本中无法正确对齐

3 个答案: