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 回答