Pemilih CSS IE8 memilih, tetapi tidak menerapkan gaya

http://www.dmhermitage.org/wtfborders.pngIni membuat saya ingin untuk bunuh diri.

Saya memiliki beberapa CSS yang sangat sederhana untuk menata objek masukan saya:

    input, button
    {
        border: 1px solid #c66600;
        background-color: white;
        color: #7d212f;
        font-family: "Eras Light ITC", Tahoma, sans;
    }

Tapi saya tidak suka batas jelek yang ditempatkan di sekitar tombol radio, jadi saya menggunakan pemilih untuk mematikan batas:

input[type=radio] { border: none; }

Anda mungkin bisa menebak di browser apa ini berfungsi dan di browser mana yang tidak berfungsi. Yang lucu adalah ketika saya menekan F12 untuk meluncurkan alat pengembang yang luar biasa di IE8, itu sebenarnya memberi tahu saya bahwa gaya tombol radio telah diganti menjadi 'tidak ada ' seperti yang saya minta, tetapi batasnya tetap ada pada objek tombol radio.

Saya telah mencoba berbagai hal semantik, seperti mengatur lebar batas menjadi 0px atau warnanya menjadi sesuatu yang gila seperti hijau limau, namun tetap menjadi warna asli yang didapat dari gaya pertama.

Dan terakhir, saya telah mencoba hanya menata gaya objek 'teks', dalam hal ini tidak ada gaya yang diterapkan pada apa pun. Sekali lagi, browser mengklaim memenuhi pilihan CSS, tetapi secara visual hal itu tidak terjadi.

Pikiran?

Omong-omong, ini adalah instalasi DotNetNuke dengan kode yang dihasilkan di mana saya tidak dapat mengatur gaya tombol radio secara eksplisit.

Terima kasih, Dan


css radio-button internet-explorer css-selectors internet-explorer-8
person Dan    schedule 16.04.2010    source sumber
comment
Apakah Anda memiliki contoh langsung yang dapat kami lihat?   -  person Kyle    schedule 16.04.2010
comment
Contoh langsung (sedang dibangun) ada di sini: dmhermitage.org/portal Periksa tombol radio di kotak pencarian untuk mengetahui maksud saya.   -  person Dan    schedule 16.04.2010
comment
Saya selalu berpikir bahwa tombol radio ini adalah standar Browser, seperti tag judul. Menarik untuk mengetahui apakah mereka dapat diubah. Anda juga memiliki set ini: -webkit-appearance: radio mungkin itu tidak membantu?   -  person Kyle    schedule 16.04.2010
comment
Jelas terlihat seperti bug, saya mendapatkan hal yang sama di IE8. Bisakah Anda mencoba menggunakan kelas alih-alih input[type=radio]?   -  person Pekka    schedule 16.04.2010

Jawaban (6)


arrow_upward
2
arrow_downward

IE8 tampaknya dirender dalam mode quirks, bukan mode standar, yang selalu mengacaukan segalanya di IE. Untuk beralih ke mode standar, cara termudah adalah dengan mengganti doctype pada baris pertama dokumen dengan ini:

<!DOCTYPE HTML>

Anda mungkin juga ingin melihat beberapa HTML yang dihasilkan. Anda memiliki rentang dengan ID dnn_dnnMENU_ctldnnMENU yang berisi lusinan atribut buatan seperti BackColor, SysImgPath, MenuItemHeightdan seterusnya. Ini tidak akan berpengaruh pada sebagian besar browser (mungkin IE menafsirkannya secara khusus, entahlah).

person DisgruntledGoat    schedule 16.04.2010
comment
tidak hanya beralih ke standar, tetapi juga beralih ke html 5 - person Adam Kiss; 16.04.2010
comment
@Adam: Tidak di IE tidak. Dan sebenarnya tidak ada perbedaan dalam cara browser lain menangani standar HTML 5, selain mendukung beberapa elemen lainnya. - person DisgruntledGoat; 17.04.2010

arrow_upward
1
arrow_downward

masalahnya adalah...

Karena sangat membantu, harap perhatikan, bahwa entah bagaimana, laman Anda dirender dalam mode kekhasan, sehingga tidak seorang pun boleh menggunakannya dengan cara yang kacau.

solusi [sunting]

karena: http://dorward.me.uk/www/ie8/

atur doctype html 4 Anda ke:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
person Adam Kiss    schedule 16.04.2010
comment
Um...itu menambahkan komentar HTML, bukan doctype. - person DisgruntledGoat; 16.04.2010
comment
Terima kasih banyak, ini memperbaiki masalah pada kotak lokal saya (belum diunggah). - person Dan; 16.04.2010

arrow_upward
0
arrow_downward

Untuk berjaga-jaga, sudahkah Anda mencoba dengan:

input[type='radio'] { border: none; }

Perhatikan penambahan tanda kutip (atau apa pun sebutannya 'dalam bahasa lucumu :P)

Saya melihat situsnya, CSS Anda benar dan tidak ada yang bisa saya bantu. Semoga beruntung!

person Kaze no Koe    schedule 16.04.2010
comment
Mencoba dengan apostrof juga. Hal yang sama. Contoh langsung (sedang dibangun) ada di sini: dmhermitage.org/portal Periksa tombol radio di kotak pencarian untuk melihat apa yang saya maksud. - person Dan; 16.04.2010

arrow_upward
0
arrow_downward

Anda dapat menghapus batas dengan menyetel atribut gaya sebaris di bilah alat pengembang ke border: none;... Jadi karena alasan tertentu gaya tersebut tidak diterapkan ke tombol radio meskipun gaya tersebut dilacak dengan benar. Sepertinya ada semacam bug.. Sudahkah Anda mencoba meningkatkan kekhususan aturan (seharusnya sudah lebih tinggi dari input, tetapi hanya untuk mencobanya)?

Contohnya:

#page input[type=radio] {
   border: none;
}
person PatrikAkerstrand    schedule 16.04.2010

arrow_upward
0
arrow_downward

Itu tidak mungkin lagi dengan CSS (sejauh yang saya tahu), tetapi menggunakan Javascript ini di sini akan mungkin bagi Anda; Menata gaya kotak centang dan tombol radio dengan CSS dan Javascript.

person Kyle    schedule 16.04.2010

arrow_upward
0
arrow_downward

Tidak menyenangkan. Coba tentukan warna bordernya menjadi putih?

person graphicdivine    schedule 16.04.2010