html - 選択がフォーカスを受け取ったときにChromeがフォームラベルと選択をシフトするのはなぜですか？

Question

簡単な住所入力フォームがあります。IE9およびFirefox10.0.2では、フォームは完全に正常に表示されます。

Chromeでは、最初の読み込み時にフォームが正常に表示されます。しかし、1つの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: blockoverflow: hidden