Question

我的页面与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&eacute;nom" onFocus="javascript:this.value=''" /></p>
                         <div class="bordertop"></div>
                         <p><input type="text" value="Votre n° de t&eacute;l&eacute;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 -->

Answer 1

您的两个样式表正在加载css_browser_selector.js

有时css是第一位的，有时候JS位于两位css之间。

这将解决后续加载时的不同显示问题。

尝试将你的CSS放在顶部，你的js和页面底部。

或者，在页面加载之前等待启动JS。

仅限Chrome的表单标记错误

1 个答案: