Question

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

为了做到这一点，我为overflow: hidden设置A以隐藏阴影中不需要的部分。

它看起来很完美，但在我向input添加A框后出现了问题。如果我点击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解决方案，它会更复杂）。

小提琴：http://jsfiddle.net/jzb5a/

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

Answer 2

最后找到一个解决方案，这不是那么完美，但无论如何都要解决问题。

当背景溢出时，同一层上的输入会导致问题。所以只需将输入移动到另一个不溢出的层。 demo

<div style="position: relative; width: 200px; height: 30px; border: 1px black dotted;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;">
        <div style="height: 30px; border-bottom: red 10px solid;"></div>
    </div>
    <input style="width: 160px" placeholder="click and drag me downward" />
</div>

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

2 个答案: