html - IE 8.0 和 Chrome 表单格式问题

Question

我为表单编写了以下 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>

Answer 1

在 css 中使用以下样式

fieldset.no_border{
    overflow:hidden;
    border:0;
    padding:0;
    margin:0 0 10px 0;
}
.float_left_guardian{
    overflow:hidden;
    margin-bottom:10px; 
}

希望这能解决您的问题。