css - 在基于 webkit 的浏览器上禁用溢出滚动

Question

我正在使用 ::after 创建阴影来装饰元素(比如 A)。

为此，我为 A 设置了 overflow: hidden 来隐藏不需要的阴影部分。

看起来很完美，但是我给A添加了一个input框后出现了问题。如果我在 input 中单击并拖动，A 层将滚动，阴影的其余部分将显示出来。

这是 demo和简化代码:

<div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;">
  <div style="height: 30px; border-bottom: red 10px solid;">
    <input style="width: 200px" placeholder="click and drag me downward" />
  </div>
</div>

我正在寻找解决此问题的纯 CSS 解决方案。先谢谢了。

Answer 1

这不是一个理想的解决方案，但我认为这个问题不存在纯 CSS 解决方案(不幸的是)，这让我想知道这是否已被 Chrome 团队记录为错误。

jQuery 应该如下所示:

$('input').on('mousedown', function(e){
    $(e.target).focus();
    e.preventDefault();
});

(我知道我不应该假设你正在使用 jQuery，如果需要我可以为你提供一个纯 JS 解决方案，它只会更复杂)。

fiddle :http://jsfiddle.net/jzb5a/

编辑:显然这是一个已知错误 ( https://bugs.webkit.org/show_bug.cgi?id=114384 ) 令人失望的是，四个月后仍然没有修复。