html - 为什么Chrome会移动我的表格标签并选择何时选择焦点？

Question

我有一个简单的地址输入表格。在 IE9 和 Firefox 10.0.2 中，表单显示得非常好。

在 Chrome 中，表单在初始加载时显示良好。但是，当我给一个 SELECT 焦点时，标签和 SELECT 都向右移动了大约 100px：

当我尝试使用 Chrome 的自动填充时，情况变得更糟：

好随便喔。现在，我可以遍历整个 HTML 布局、CSS 规则和正在使用的 JavaScript/jQuery，但是，我正在寻找关于可能导致这种情况的一些想法。下面是用于相关元素的 HTML 和 CSS。

HTML：

<form id="editAddressForm" name="editAddressForm" action="" method="post">
    <fieldset>
        <label>Name/Attention *:</label>
        <cfoutput>
        <input name="shipToName" value="#FORM.shipToName#" maxlength="40" />
        </cfoutput>
        <br />
        <label>Company:</label>
        <cfoutput>
        <input
            name="shipToCompany"
            value"#FORM.shipToCompany#"
            maxlength="40" />
        </cfoutput>&nbsp;
        <br />
        <label>Address 1 *:</label>
        <cfoutput>
        <input
            name="shipToAddressLine1"
            value="#FORM.shipToAddressLine1#"
            maxlength="40" />
        </cfoutput>&nbsp;
        <br />
        <label>Address 2:</label>
        <cfoutput>
        <input
            name="shipToAddressLine2"
            value="#FORM.shipToAddressLine2#"
            maxlength="40" />
        </cfoutput>&nbsp;
        <br />
        <label>Address 3:</label>
        <cfoutput>
        <input
            name="shipToAddressLine3"
            value="#FORM.shipToAddressLine3#"
            maxlength="40" />
        </cfoutput>
        <br />
        <label>City *:</label>
        <cfoutput>
        <input name="shipToCity" value="#FORM.shipToCity#" maxlength="30" />
        </cfoutput>
        <br />
        <label>State *:</label>
        <oftags:selectState name="shipToState" selectedValue="#FORM.shipToState#">
        <br />
        <label>Zip *:</label>
        <cfoutput>
        <input
            name="shipToPostalCode"
            value="#FORM.shipToPostalCode#"
            maxlength="10" />
        </cfoutput>
        <br />
        <label>Phone:</label>
        <cfoutput>
        <input
            name="shipToPhone"
            value="#REQUEST.UDFLib.String.PhoneFormat(FORM.shipToPhone)#"
            maxlength="16"/>
        </cfoutput>
        <br />
        <label>E-Mail:</label>
        <cfoutput>
        <input
            name="shipToEmailAddress"
            value="#FORM.shipToEmailAddress#"
            maxlength="60"/>
        </cfoutput>
        <br />
    </fieldset>
    <label>&nbsp;</label>
    <input type="submit" value="Submit" />
    <br />
</form>

CSS：

#editAddressForm {
    text-align: left;
    width: 720px;
}

#editAddressForm label {
    float: left;
    width: 140px;
    font-weight: bold;
    margin: 6px 0;
}

#editAddressForm fieldset {
    border: none;
}

#editAddressForm fieldset input,
#editAddressForm fieldset select {
    width: 200px;
}

#editAddressForm br {
    clear: left;
}

#editAddressForm select  {
    margin: 3px 0;
}

jQuery/JavaScript：

<script type="text/javascript">
    $(function(){
        /*
         * Page Initialization
         */
        $("input[name='shipToName']").focus();
    })
</script>

<script type="text/javascript">
    $(function(){
        $("#stateSelect").selectSelectedValue();
    });
</script>

jquery-select.js：

(function($){
    $.fn.extend({
        selectSelectedValue: function(callback) {
            var _selectedValue = $(this).prop("selectedValue");

            $(this).find("option").each(function(){
                if ($(this).text() == _selectedValue)
                    $(this).prop("selected", true);
            });

            $(this).change();

            if($.isFunction(callback))
                callback.call(this);
        },

        selectDefaultOption: function(callback) {
            $(this).find("option:first").prop("selected", true);

            $(this).change();

            if($.isFunction(callback))
                callback.call(this);
        },

        disable: function(){
            $(this).prop("disabled", true);
        },

        enable: function(){
            $(this).prop("disabled", false);
        }
    });
})(jQuery);

Answer 1

尝试在您的，或者更好的是，为标签和输入的父容器设置一个line-heightCSS 。#editAddressForm label还可以尝试display: block父元素并设置高度和/或overflow: hidden.