::elemen semu huruf pertama tidak berfungsi di firefox

Seumur hidup saya, saya tidak bisa memikirkan hal ini. Saya hanya ingin memberi gaya pada tanda dolar menjadi warna yang berbeda dan saya ingin menghindari penggunaan elemen lain di sekitar tanda dolar.

<ul>
    <li><strong>John Dow</strong> <div>$5,849,487<sup>84</sup></div></li>
    <li><strong>David Jones</strong> <div>$5,498,364<sup>01</sup></div></li>
    <li><strong>Susie Smith</strong> <div>$5,098,276<sup>35</sup></div></li>
</ul>

Dan CSS ini:

li::first-letter {
    color: blue;
}
li div::first-letter {
    color: red;
}​​

Yang biru berfungsi, yang merah tidak.

http://jsfiddle.net/ryanwheale/KUzUp/


css firefox pseudo-element
person Ryan Wheale    schedule 05.10.2012    source sumber

Jawaban (3)


arrow_upward
7
arrow_downward

Tampaknya karena karakter $ tidak ditafsirkan sebagai karakter huruf oleh Firefox, berdasarkan penemuan bahwa mengganti $ dengan karakter huruf (A, B, C...) menyebabkan demo berfungsi:

<ul>
    <li><strong>David Wilcox</strong> <div>A$5,849,487<sup>84</sup></div></li>
    <li><strong>David Cowee</strong> <div>B$5,498,364<sup>01</sup></div></li>
    <li><strong>D.J. Johnson</strong> <div>C$5,098,276<sup>35</sup></div></li>
</ul>​

Demo JS Fiddle.

Namun, jika meninjau kembali pertanyaan ini, perlu dicatat bahwa sekarang Anda dapat menggunakan konten yang dihasilkan CSS untuk menyediakan, dan menata, karakter pertama, menggunakan ::before:

li div::before {
    content: '$';
    color: red;
}

Dengan HTML:

<ul>
    <li><strong>David Wilcox</strong> 
        <div>5,849,487<sup>84</sup>
        </div>
    </li>
    <!-- siblings removed for brevity -->
</ul>

Demo JS Fiddle.

person David says reinstate Monica    schedule 05.10.2012
comment
Terima kasih untuk demonya, tapi @StephanNeubert mengalahkan Anda. - person Ryan Wheale; 06.10.2012
comment
Arahkan mouse ke teks '...menit yang lalu', dan Anda akan melihat stempel waktu di tooltip yang menunjukkan waktu yang tepat untuk memposting jawabannya. Kami berada cukup dekat pada waktu yang sama sehingga tidak ada bedanya, tetapi menurut saya, saya sedikit lebih cepat. =) Namun, untuk mengulangi: 'cukup dekat sehingga tidak ada perbedaan.' - person David says reinstate Monica; 06.10.2012
comment
Maaf, saya seharusnya lebih jelas. Postingan Stephan muncul pertama kali (tidak yakin kenapa), tapi yang pasti dia bukan yang pertama memposting. Sejak saya memberikan poin pada jawaban pertama, saya dengan patuh telah memberikan kembali poin kepada Anda. Terimakasih atas klarifikasinya. - person Ryan Wheale; 06.10.2012
comment
Sejujurnya, tidak masalah siapa yang pertama, yang penting adalah 'siapa yang paling banyak membantu Anda.' Meskipun, tentu saja, saya menghargai perwakilannya! - person David says reinstate Monica; 06.10.2012
comment
Untuk jawaban yang sama-sama membantu, menurut saya siapa yang pertama. - person Ryan Wheale; 11.10.2012

arrow_upward
3
arrow_downward

Semuanya berfungsi sebagaimana mestinya: ::first-letter memilih huruf pertama, tetapi "$" bukanlah huruf melainkan karakter khusus.

person Stefan Neubert    schedule 05.10.2012
comment
Wow... Saya tidak akan pernah menduga bahwa itu benar-benar harafiah. - person Ryan Wheale; 06.10.2012
comment
Untuk apa nilainya, spesifikasinya mengatakan: Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included. Tanda dolar ada di kelas Sc di Unicode, yang, seperti kata Stefan, adalah karakter khusus. Jika Anda memiliki tanda kutip di sana, perilakunya akan berbeda... - person Boris Zbarsky; 06.10.2012

arrow_upward
1
arrow_downward

Yang lain sudah menjelaskan mengapa itu tidak berhasil, jadi, perbaikan kecil untuk Anda pertimbangkan: berikan kelas div uang Anda, misalnya

<li><strong>David Wilcox</strong> <div class="money">5,849,487<sup>84</sup></div></li>

keluarkan $ literal, dan masukkan ke dalam konten :before, misalnya:

.money:before {
    content: '$';
    ...
}

Sekarang Anda dapat menatanya sesuka Anda.

person tuff    schedule 05.10.2012
comment
Jika Anda dapat memodifikasi kontennya, mengapa tidak membungkus “$” dalam span, daripada membuat tampilannya bergantung pada CSS? - person Jukka K. Korpela; 06.10.2012
comment
Maksud Anda kontennya bergantung pada CSS (karena kemunculannya akan tetap demikian)? Tidak ada alasan yang sangat kuat, kecuali bahwa :before akan memerlukan lebih sedikit markup, dan jika konten .money diisi secara terprogram, hal ini akan memungkinkan penyampaian data yang lebih bersih. - person tuff; 06.10.2012
comment
Saya setuju dengan Jukka: Saya akan menghindari menambahkan konten melalui css kapan pun saya bisa - itulah gunanya memisahkan konten dan presentasi. - person Stefan Neubert; 06.10.2012
comment
Terima kasih untuk sarannya. Kelas ini bahkan tidak diperlukan karena saya sudah menargetkan DIV dalam contoh asli saya. Sayangnya klien membayar untuk dukungan IE7 (yang merupakan tambahan saat ini). Selain itu, saya akan berurusan dengan editor konten... dan saya tidak ingin menjelaskan bagaimana tanda dolar muncul secara ajaib. Jika itu adalah situs saya, ini akan menjadi kemenangan. - person Ryan Wheale; 06.10.2012