1

左側のフィルター ドロップダウンが変更されると、同じ長さになるように動的にサイズ変更される入力ボックスがあります。

ユーザーがドロップダウンからフィルターを変更するたびに幅のオフセットを計算するjQueryがあります。IE と Firefox で正しく動作します。しかし、何らかの理由で、Chrome で失敗し、入力ボックスを縮小し続けます。

なぜこれが起こるのか分かりますか？

こちらがライブバージョン。

サイズ変更コードは次のとおりです。

$('#refineDropdown li').click(function() {
        var tmp = $('#refine').width();
        $('#refine').html($(this).text()); // sets the text of the button to the new selection
        $('#refine').removeClass('refineClicked'); // temp css restyling
        $("#refineDropdown").hide(); // hides the dropdown
        testLength(); // adjusts the width of the input box suggestions drop down
        $('#search').css('width', $('#search').width() + (tmp - $('#refine').width())); // calculates the new width offset and makes the adjustment
    });

function testLength() {
        if ($('#refine').text().length > 7) {
            $('#refine').html($('#refine').text().substring(0, 6) + "...");
        }
        $('#dropdown').css('width', $('#search').width() + 1);
        $('#dropdown').css('margin-left', $('#refine').width() + 13);
    }
4

1 に答える 1

5

変更することでこれを修正できました

type="search"

に

type="text"

あなたの#search

検索は Webkit のみの入力であるため、スタイリングに逆らいます。こちらを参照してください

上記のリンクから：

WebKit には、検索入力で変更できる内容に大きな制限があります。アイデアは一貫性だと思います。特に Safari では、検索フィールドはブラウザの右上にある検索ボックスのように見えます。次の CSS は、WebKit では「何があっても」無視されます。つまり、!important ルールで対抗することさえできません。

于 2012-11-16T21:35:10.620 に答える