我的页面与 IE 7 8 9、Firefox、Safari 和 Opera 完美配合。但是当我用 Chrome 打开它时,它DIV
的form
位置并不总是很好。如果我删除表单标签,问题就会消失。我没有浮动,只有这部分代码是绝对的。显然,问题来自于form
,而且只有 Chrome。
CSS代码:
#fond-diapo{background:url('../images/pattern2.gif');height:420px}
#diapo-center{width:920px;margin:0 auto 0}
/* Contactez nous */
#contact-home{position:absolute;margin-left:600px;width:258px;height:421px;background:url('../images/contactez-nous-fond.png') no-repeat;}
#contact-home h3{color:#c37ed5;padding:100px 0 0 75px}
.form2{margin:26px 0 0 34px;height:406px}
#contact-home p{width:192px;padding:8px 0 0 0}
#contact-home input[type=text]{padding:0 6px 0 12px;width:192px;height:29px;background:url('../images/fond-input.png') no-repeat;color:white}
#contact-home select {border:1px solid #c6c4c4;color:#4f4f4f;float:right;width:150px}
#contact-home input[type=submit]{background:none;color:white;margin:18px 0 0 48px;font-weight:bold;letter-spacing:2px;font-size:18px;cursor:pointer}
.gecko #contact-home input[type=submit]{margin:15px 0 0 48px}
.ie7 #contact-home input[type=submit]{margin:10px 0 0 0}
.ie7 #contact-home select{margin-top:-18px}
.bordertop{width:192px;height:1px;border-top:1px solid #c6c4c4;margin:10px 0 0px 0}
.ie7 #contact-home input[type=text]{padding-top:6px}
.ie8 #contact-home input[type=text]{padding-top:6px}
.ie7 .bordertop{margin:4px 0 0px 0}
.ie8 .bordertop{margin:4px 0 0px 0}
HTML 代码:
<div id="fond-diapo">
<div id="diapo-center">
<div class="absolute">
<img src="images/carrousel/img1.jpg" />
</div>
<div id="contact-home">
<h3>01 75 57 85 45</h3>
<form action="#" name="form2" class="form2">
<p>Remplissez le formulaire, nous vous rappelons sous 24 heures.</p>
<p><input type="text" value="Votre nom et votre prénom" onFocus="javascript:this.value=''" /></p>
<div class="bordertop"></div>
<p><input type="text" value="Votre n° de téléphone" onFocus="javascript:this.value=''" /></p>
<div class="bordertop"></div>
<p><input type="text" value="Votre adresse Mail" onFocus="javascript:this.value=''" /></p>
<div class="bordertop"></div>
<p>
Lieu :
<select name="fonction">
<option value="paris13">SWF paris 13eme</option>
<option value="paris16">SWF paris 16eme</option>
</select>
</p>
<input type="submit" value="VALIDER" />
</form>
</div>
<!-- Fin du div contact-home -->
</div>
<!-- Fin du div diapo center -->
</div>
<!-- Fin du div fond diapo -->