3

我<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);
}

问候。

4

2 回答 2

3

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

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

blockquote p {
    position: relative;
}

此外，将您包装<blockquote>在一个<div>使用中：

div {
    position: relative;
    overflow: hidden;
}

在这种情况下，您可以position: relative;从<blockquote>.

演示

先试后买

于 2013-08-03T22:22:24.550 回答
1

显然，最简单的解决方案是应用于overflow: hiddenblockquote 元素。然后伪元素被剪裁并且永远不会大于块引用本身。

blockquote {
    overflow: hidden;
}

Fiddle

于 2013-08-03T22:21:13.077 回答