1

絶対に配置された :before 要素に頭を悩ませています。私は、証言の後ろに座るために大きな引用符を求めています。私は :before 要素を使用しました。これはフォントであるため、Retina ディスプレイ用にスケーラブルであり、画像の追加の http 要求を節約できます (スプライトを作成できる他の画像はありません)。また、柔軟性が向上します。の位置 (背景画像は要素の左側にパディングが必要です。これは、グリッドをいじって、CSS を使用している他のページ全体で均一性を失うことを意味します)。

それが理にかなっていることを願っています！私が直面している問題は、:before 要素がその上のテキストを覆っていることです。テキストだけの場合は大した問題ではありませんが (それでも問題はあります)、完全にクリックできないリンクがあります…</p>

ここに私の問題の jsFiddle があります: http://jsfiddle.net/tempertemper/KzQZQ/

:before は li 要素上にあるため、blockquote と cites の後ろにあると思いますが、そうではないようです。

z-index を試してみましたが、すべてが正しく機能していないようです。また、blockquote と cite の位置の値を変更しようとしましたが、喜びはありません。

ご覧いただきありがとうございます:)

4

1 に答える 1

4

Chromeでも問題に気付きました。:before に背景を追加するだけで、実際に何が起こっているかを確認できます (私がよく使用するトリック)。または、Firefox で 3D ビューを試すこともできます。あなたの疑いは正しかった、ブレースは実際にはリンクの上に横たわっています。css が適用される前に DOM がレンダリングされるため、これは理にかなっています。ただし、z-index を追加することで問題は解決しました。あなたのフィドルを更新しました：http://jsfiddle.net/KzQZQ/1

これで解決するはずです。これがうまくいかなかったのは奇妙ですが、おそらくあなたは何か間違ったことをしているのでしょう...これでさらに問題がある場合はお知らせください。

于 2012-08-17T20:25:39.490 に答える