：之前導致元素不可選

我使用CSS的:before選擇器用引號標記我的<blockquote>。一切都好，它可以工作，但有一個問題。引號引起接近此標記的元素不可選。或者，更準確地說，它們不能直接選擇。引號位於頂部，瀏覽器嘗試選擇此選項（儘管: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); 
}

問候。

來源

2013-08-03 m4tx

顯然最簡單的解決方案是將overflow: hidden應用於blockquote元素。僞元素然後被剪切並且不會比塊引號本身更大。

blockquote { 
    overflow: hidden; 
}

Fiddle

來源

2013-08-03 22:21:13 nirazul

你的最後一點是不正確的。請參閱：[demo]（http://jsfiddle.net/adFCe/）。 blockquote需要'relative'位置，否則'absolute'定位的元素會與具有給定位置的最接近的父元素（在視口的最後）對齊。 – insertusernamehere

你似乎是對的！我會編輯它。 – nirazul

問題是這樣的規則：position: absolute;。

您可以使用它來使再次內BLOCKQUOTE可選元素：

blockquote p { 
    position: relative; 
}

除了包裝您在<blockquote>一個<div>使用：

div { 
    position: relative; 
    overflow: hidden; 
}

在這種情況下，你可以刪除position: relative;<blockquote>。

演示

Try before buy

來源

2013-08-03 22:22:24 insertusernamehere

嗯...但如何在元素*外* blockquote？ :) – m4tx

@ m4tx我已經更新了答案 - 希望這有助於。 – insertusernamehere

Nirazul的答案更適合我 - 我不必將我的blockquote包裝成div。但你的答案仍然非常好（和你發佈的解決方案也是），所以我upvoted它:) – m4tx

：之前導致元素不可選

回答

相關問題