Bootstrap 非流体 IE7 布局答案

【问题标题】：Bootstrap non-fluid IE7 layoutBootstrap 非流体 IE7 布局
【发布时间】：2013-04-22 16:00:01
【问题描述】：

我正在使用Bootstrap's non-responsive grid 来布局数据输入表单。尽管表单在 Chrome 中看起来很完美，但 IE7 显示的表单带有额外的“填充”，这会占用可用的垂直空间。我的组织still(!) uses IE7，所以我需要帮助纠正以下问题：

为什么输入与上面的标签不对齐？
为什么行不跨越整个容器？

相关 HTML：

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DS-11</title>
    <link href="http://10.20.17.226:7080/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="http://10.20.17.226:7080/main.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<form id="frm_referral_ds11" action="frm_referral_ds11.process" method="post">
    <div class="row coral-background border-side">
        <div class="span12">
            <label for="p_mailing_address"><strong>8. Mailing Address:</strong> Line 1: (Street/RFD#, URB, or P.O. Box, Apt./Unit, In Care Of or Attn (<em>e.g. in Care of - Jane Doe, Apt # 100</em>))</label>
            <br />
            <input type="text" name="p_mailing_address" id="p_mailing_address" class="span12" maxlength="200" />
        </div>
    </div>
</form>
</body>
</html>

main.css：

input.span12 {
    margin: 0;
    margin-left: 0;
}

label {
    display: inline-block;
}

.coral-background {
    background-color: #FFD595;
}

.border-side {
    border-left: 3px #000 solid;
    border-right: 3px #000 solid;
}

【问题讨论】：

当我说“填充”时，我不一定是在谈论 CSS 盒子模型的“填充”。

标签： html css twitter-bootstrap internet-explorer-7

【解决方案1】：

那是你想要达到的result (jsfiddle.net) 吗？

HTML：

<form id="frm_referral_ds11" action="frm_referral_ds11.process" method="post">
    <div class="row coral-background border-side span12">
        <label for="p_mailing_address"><strong>8. Mailing Address:</strong> Line 1: (Street/RFD#, URB, or P.O. Box, Apt./Unit, In Care Of or Attn (<em>e.g. in Care of - Jane Doe, Apt # 100</em>))</label>
        <input type="text" name="p_mailing_address" id="p_mailing_address" class="span12" maxlength="200" />
    </div>
</form>

CSS：

@import url('http://twitter.github.io/bootstrap/assets/css/bootstrap.css');
 .coral-background {
    background-color: #FFD595;
}
.border-side {
    border-left: 3px #000 solid;
    border-right: 3px #000 solid;
}

【讨论】：