使用边框半径和溢出渲染叠加到div：隐藏（仅限Chrome）

小提琴在这里：https://jsfiddle.net/mengma/8k5pekrr/1/

这个问题仅限于Chrome浏览器 - 覆盖图不会覆盖整个屏幕。 删除边界半径或溢出CSS不会有这个问题。 任何想法通过它？ 似乎是最新的Chrome的错误（之前没有看到它）

 <div class="dialog">
     <div>
       dialog <a href="http://google.com">click</a>
     </div>
     <div class="fadeMe"></div>
  </div>

    div.dialog {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 20px;
        border-radius: 4px;
        border: none;
        left: 20px;
        z-index: 12;
        border: solid 1px #000;
        overflow: hidden;
    }


    div.fadeMe {
        opacity: 0.5;
        background: #ccc;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
        position: fixed;
    } 

---

我遇到了同样的问题。 我发现在对话框中添加一个比边框半径大的透明边框可以修复它。

div.dialog { border: solid 5px transparent; }

在你的情况下，它将取代你的黑色1px边框，这也可能不合意。

链接地址: http://www.djcxy.com/p/75531.html

上一篇: Rendering overlay to div with border radius and overflow: hidden (Chrome only)

下一篇: remove inner shadow of text input