我为表单编写了以下 CSS 代码,
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 740px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
}
fieldset.no_border{
overflow:hidden;
border:0;
margin:3px 0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
float:left;
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#personal_details span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
.ui-datepicker{
font-size:12px;
}
#guardian_one_details{
display:none;
}
#guardian_two_details{
display:none;
}
#guardian_three_details{
display:none;
}
#nominee_one_details{
display:none;
}
#nominee_two_details{
display:none;
}
#nominee_three_details{
display:none;
}
#nominee_percentage{
display:block;
}
#total_nominees{
display:none;
}
#first_nominee_percent{
display:none;
}
#second_nominee_percent{
display:none;
}
#third_nominee_percent{
display:none;
}
#nominee_percent_allocation{
display:none;
}
.float_left {
float:left;
width:33%;
}
.float_left_nominee_percent {
float:left;
width:25%;
}
.float_left_guardian {
float:left;
width:69%;
}
.float_right_guardian {
float:left;
width:29%;
}
问题是表单在 Chrome 中正确呈现,但在 IE 8 中,字段彼此太近。
如何像在 Chrome 中一样在 IE 和 Chrome 中完成渲染。
IE中的表单
Chrome 中的表单
我希望在 IE 中正确完成间距,就像在 Chrome 中一样。
我的 html 代码(部分)
<form id="personal_details" name="personal_details" action="">
<fieldset class="no_border">
<div class="float_left">
<input type="radio" value="nominee_no" name="nomination" id="nomination_no"/>I don't want to nominate.
</div>
<div class="float_left">
<input type="radio" value="nominee_yes" name="nomination" id="nomination_yes"/>I would like to nominate.
</div>
<div class="float_left" id="total_nominees">
Total Nominees:
<select name="nominees" id="nominees" class="effect">
<option value="one">Single Nominee</option>
<option value="two">Two Nominees</option>
<option value="three">Three Nominees</option>
</select>
</div>
</fieldset>
<fieldset class="border" id="nominee_one_details"><legend>Nominee One Details:</legend>
<fieldset class="no_border">
<label>Name:</label><br /><input type="text" class="effect" name=""/>
</fieldset>
<fieldset class="no_border">
<label>Address:</label><br /><input type="text" class="effect"/>
</fieldset>
<fieldset class="no_border">
<div class="float_left"><label>Date of Birth:</label><br /><input type="text" class="effect" name="input" id="nominee_one_dob" style="width:40%";/></div>
<div class="float_left"><label>Age in years:</label><br /><input readonly="readonly" type="text" class="effect" name="input" id="nominee_one_years" value="0" style="width:20%;" /></div>
<div class="float_left"><label>Relationship:</label><br /><input type="text" class="effect" style="width:95%" /></div>
</fieldset>
<fieldset class="no_border" id="guardian_one_details">
<div class="float_left_guardian">
<label>Guardian Name:</label><br /><input type="text" class="effect" /></div>
<div class="float_right_guardian"><label>Guardian PAN:</label><br /><input type="text" class="effect" /></div>
</fieldset>
</fieldset>