为什么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-height上的CSS中设置#editAddressForm label，或者更好的是，在标签和输入的父容器中设置display: block。同时在父元素上尝试overflow: hidden并设置高度和/或{{1}}。