DIV CSS无法在下部IE版本中正确对齐

我在DIV标签及其关联的CSS中具有标签和输入字段的JSP代码。这些字段的一致性在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;
}

考虑使用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（如我的代码示例）或zoom: 1一样。

但实际上，对于您的情况，正确标记的表就足够且完美地语义（请使用TH元素和scope属性注意）：

<form>
    <table>
        <tr>
            <th scope="row">Location:</th>
            <td><select><option>Hello</option></select></td>
        </tr>
        <tr>    
            <th scope="row">Name:</th>
            <td><input name="example" /></td>
        </tr>
    </table>
</form>

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

您确定真的必须吗？您知道当前的IE7市场份额吗？您生活在平行现实中吗？;-)提示：当前唯一重要的版本至少是IE9 。

您可能需要在Internet Explorer 6及更低的情况下使用单独的样式，这是使用条件样式表的代码，将其放在其他链接样式表的下方，因此此IE6较低的样式表覆盖您已经应用的任何CSS。

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

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

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

Div Align JS小提琴

相关内容

最新更新

热门标签：