html -::select 伪元素在填充空间中被忽略，选择越界...？

Question

我正在尝试应用 non-standard, but pretty widely supported CSS 伪选择器，用于设置浏览器中选择项的文本颜色。起初似乎一切都很好，然后冰鼬来了。

假设您有这个 HTML:

<div class="outside">
    So what's wrong with this picture?
    <div class="fancy">
        Custom selection color lost on right
        <div>But only on direct children</div>
        <div>Divs underneath are ok (?)</div>
    </div>
    ...aaand selection bleeds to outside div. :-/
</div>

使用这个 CSS:

.outside {
    margin: 32px;
}

.fancy {
    color: white;
    background: green;
}

.fancy::selection, .fancy div::selection {
   background: #800080 !important;
}

在 Chrome/Safari 中你得到的是这样的:

( Here's a jsFiddle ，当然您必须进行选择才能获得效果)

如果有人想接受向我解释其中逻辑的挑战，请做客。但是如果你不能解释它，可以告诉我如何让它看起来像:

那么这对我正在做的事情来说已经足够好了!

---

更新:将@ralph.m 关于区域外流血的回答标记为已接受。尽管它没有解决关于丢失自定义选择颜色的第二个问题。每当您跨 block 级元素进行选择时，这似乎就会发生，该元素同时包含 block 级元素和非 block 级元素作为子元素。除了将您的文档结构更改为没有该模式外，可能没有任何办法(和/或不关心)

Answer 1

使用 overflow: hidden; 通常对我有用。例如

.fancy {
    overflow:hidden;
}