1

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

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

它看起来很完美，但是在我添加一个input框到A. 如果我单击input并拖动，A图层将滚动，阴影的其余部分将显示出来。

这是演示和简化代码：

<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 解决方案来解决这个问题。提前谢谢。

4

2 回答 2

2

这不是一个理想的解决方案，但我认为这个问题不存在纯 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），令人失望的是，四个月后仍然没有修复。

于 2013-08-21T17:47:22.537 回答
0

终于找到了一个解决方案，虽然不是那么完美，但无论如何都解决了问题。

由于背景溢出，同一层的输入会导致问题。所以只需将输入移动到另一个不会溢出的层。演示

<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>
于 2013-08-29T05:18:35.677 回答