Chrome中<input>的动态重新调整失败(适用于IE/Firefox)

Question

我有一个输入框,当更改其左侧的过滤器时,它会动态地重新调整大小以显示相同的长度.

我有一些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);
    }

Answer 1

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

type="search"

至

type="text"

在你的 #search

搜索是仅限webkit的输入,因此无视您的样式,请参阅此处

从以上链接:

WebKit对您在搜索输入上可以更改的内容有很大的时间限制.我猜这个想法是一致的.特别是在Safari中,搜索字段看起来就像浏览器右上角的搜索框一样.WebKit中将忽略以下CSS"无论如何",因为在!重要规则中你甚至无法对抗它.