Question

我注意到jQuery的filter(":visible)在应用于具有溢出自动的元素时出现了一些奇怪的行为，后来被重置为隐藏（在Chrome中）。

https://jsfiddle.net/80wxkhbo/2/，https://jsfiddle.net/80wxkhbo/3/

此代码的目的是将元素（之前的溢出，通过其他一些代码设置为隐藏），找到某个子节点并将其拉伸到父节点的完整可用高度。

该示例尽可能简化。这个问题的重点（错误报告，也许？）是当你对任何事物（父母，任何子元素）应用filter(:visible)时，即使你没有以任何方式实际使用它，塑造，或者表格，标题的宽度小于父标题（通过滚动条的宽度）。但是，如果您删除了过滤器，或者在之前重置了oveflow进行过滤（例如此处https://jsfiddle.net/80wxkhbo/4/），则结果与预期一样（并且与其他浏览器一样）

知道为什么会这样吗？（Chrome版本48.0.2564.97 m）这也发生在其他Chrome版本中吗？除了确保在应用过滤器之前根据请求设置溢出之外，还有任何优雅的解决方案可以防止这种不良行为吗？

源代码：

＆＃13;

$(".container").css({
	overflow: "auto"
});

// comment this line (which does nothing and see the what the width of the header does in chrome)
// it should do basically nothing - it is not assigned to any variable, nor is any action called
// - yet it makes the header shrink by the scrollbar width...
$(".container").filter(":visible");

// set overflow to hidden
$(".container").css({
	overflow: "hidden"
});

$(".content").css({
	overflow: "auto",
  height: "450px"
});

＆＃13;

.container { height:500px; color:white; }
.head { background:red; height:50px; }
.longcontent { background:orange; height:1000px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='container'>
<div class='head'>Some header</div>
<div class='content'>
  <div class='longcontent'>Some long content</div>
</div>

＆＃13;

jQuery过滤器（＆＃34;：visible＆＃34;）在Chrome中有宽度的混乱

0 个答案: