html - :before causes elements to be unselectable

Question

我设计了我的 <blockquote>带引号使用 CSS 的 :before选择器。一切正常，工作正常，但有 1 个问题。引号导致靠近该标记的元素无法选择。或者，更准确地说，它们不能直接选择。引号位于它们的顶部，浏览器会尝试选择它(尽管不能选择 :before 元素)而不是位于它们后面的元素。

jsFiddle:http://jsfiddle.net/5z3YY/1/
尝试选择“blabla”或“foobar”。你不能(或者，更准确地说:只使用鼠标，你可以选择整个单词或什么都不选)，但我想做的是赋予它这样做的能力。
在 Chrome 28 和 Firefox 22 上测试。

代码:

HTML:

<blockquote><p>blabla</p></blockquote>
foobar

CSS:

blockquote {
    min-height: 60px;
    background-color: #fafafa;
    positon: relative;
    margin: 0;
}

blockquote:before {
    display: block;
    font-size: 120px;
    content: "\201D";
    height: 1px;
    position:absolute;
    top: -5px;
    color: rgba(0, 0, 0, 0.15);
}

问候。

Answer 1

问题是这条规则:position: absolute; .

您可以使用它使 blockquote 中的元素再次可选择:

blockquote p {
    position: relative;
}

另外包装你的 <blockquote>在<div>使用:

div {
    position: relative;
    overflow: hidden;
}

在这种情况下，您可以删除 position: relative;来自 <blockquote> .

演示

Try before buy