jquery - 在 Chrome 中动态调整 <input> 大小失败(适用于 IE/Firefox)

Question

我有一个输入框，当其左侧的过滤器下拉菜单发生更改时，该输入框会动态调整大小，使其看起来具有相同的长度。

我有一些 jQuery，可以在每次用户从下拉列表中更改过滤器时计算宽度偏移。它在 IE 和 Firefox 中工作正常。但由于某种原因，它在 Chrome 中失败并继续缩小输入框。

知道为什么会发生这种情况吗？

<强> Here's a live version.

这是调整大小的代码:

$('#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);
    }

Answer 1

我能够通过更改来解决这个问题

type="search"

至

type="text"

在您的#search

搜索仅是 Webkit 的输入，因此违背了您的样式，see here

来自上面的链接:

WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.