Bootstrap非流體IE7佈局

我正在使用Bootstrap's non-responsive grid來佈置數據輸入表單。儘管在Chrome中表單看起來很完美，但IE7顯示的表單帶有額外的「填充」，它從可用的垂直空間中取走。我的組織still(!) uses IE7，所以我需要幫助糾正了以下問題：Bootstrap非流體IE7佈局

爲什麼不輸入排隊與它上面的標籤嗎？
爲什麼行不橫跨整個容器？

IE7 lays out the form with extra padding

相關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; 
}

來源

2013-03-15 Jeromy French

當我說「填充」，我不一定在談論CSS盒模型的「填充」。 – 2013-03-15 16:14:32

是那個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; 
}

來源

2013-04-22 08:00:01

是的。謝謝。 – 2013-04-22 14:54:49

Bootstrap非流體IE7佈局

回答

相關問題