2011 7 Juli 2011
Telah membaca di blog ini beberapa ... pikir itu bagus untuk katalog ini untuk ref masa depan .... juga bisa menjadi pertanyaan wawancara penting bahwa Anda akan bertanya suatu hari ....
Menulis potongan CSS yang akan menampilkan ayat dengan warna biru di browser lama, merah di browser yang lebih baru, hijau dan hitam di IE6 di IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
no comments | tags: FF Hacks , IE Hacks | diposting di CSS
2008 10 Oktober 2008
CSS untuk Non-IE Browser: Its ada berita untuk pengembang CSS yang, Selectors Anak CSS seperti contoh di bawah ini, tampaknya tidak bekerja di IE.
misalnya div> rentang beberapa css {}, yang berarti "ketika sebuah elemen span adalah anak (dan BUKAN cucu atau anak moyang dll) dari elemen divisi".
Tapi kami menggunakan CON ini untuk keuntungan kita. Secara historis, pemilih anak telah digunakan untuk menyembunyikan perintah CSS dari IE. Cukup dengan menempatkan html>body di depan setiap perintah CSS IE akan mengabaikannya:
html>body .foo { CSS commands go here ;}
Ini bekerja karena <body> selalu anak <html> - itu tentu saja tidak pernah menjadi cucu atau cicit dari <html> .
Sekarang IE 7 pemilih memahami anak, Anda harus memasukkan tag komentar kosong di langsung setelah tanda lebih besar dari IE 7 akan tidak memahami hal ini pemilih (yang tahu mengapa?!) Dan karena itu akan benar-benar mengabaikan perintah CSS.:
html> /**/ body .foo { CSS commands go here ;}
Jika belum melihat ini sebelumnya, telah membaca melalui hal berikut juga
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah | diposting di quirks Browser , CSS
2008 4 Oktober 2008
Seperti biasa, salah satu dari beberapa banyak masalah aneh dengan IE dan yang satu ini harus peringkat di TOP 10 quirks IE.
MASALAH (Ini adalah masalah saya, mungkin Anda memiliki misbehaviors serupa):
Saya memiliki DIV banyak ada di halaman dengan kelas "sectionhead", yang tidak lain adalah judul sebuah bagian pada halaman. Jadi saya telah melihat beberapa gaya seperti ini
Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}.
Div adalah bar abu-abu terang dengan beberapa teks hitam. Apa yang terjadi di IE adalah beberapa bagian header ditampilkan ok, tapi ada pula yang tak terlihat, SAMPAI, Anda menggulir halaman atau klik sesuatu di halaman dll Terkadang mereka cenderung menghilang ketika Anda klik tombol 'alt' kunci ketika Anda halaman ke bawah atau gulir dengan scroll bar. Mereka kadang-kadang tampaknya muncul kembali ketika Anda memuat ulang (F5) halaman. Saya pendek DIV sempurna sederhana dengan beberapa gaya sederhana berperilaku BAD.
Apa yang bisa menyebabkan seperti perilaku tak menentu? Nah! Terus terang, NO IDEA!
MUNGKIN SOLUSI:
Sekali lagi jangan tanya saya kenapa, tapi dalam banyak masalah ini cenderung menghilang ketika Anda menambahkan posisi: relatif terhadap salah berperilaku gaya elemen, seperti ini
Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}.
Aneh tapi apa yang harus dikatakan? Tuhan memberkati saya dari IE!
DAN DO SAHAM DENGAN KAMI, JIKA ANDA MEMILIKI MASALAH SAMA.
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah | diposting di quirks Browser , CSS , HTML
2008 20 Juni 2008
Jika Anda pernah dibuat (atau membuat satu) Menu Vertikal menggunakan daftar item (li) tag dan CSS, mungkin Anda alami, ini satu lagi bug di Internet Explorer, dimana IE 6 sisipan kesenjangan antara daftar item yang mengandung unsur blok tingkat, yaitu jika ada spasi antara daftar item di markup. Terima kasih, tapi tidak, terima kasih, versi IE 7 tampaknya bebas dari bug ini.
Jika seperti saya, dan banyak lagi, Anda termasuk band ini pengembang frustrasi, yang masih harus mendapatkan layout baru mereka, bekerja di IE6 juga, maka ini mungkin terbukti bermanfaat. Melihat-lihat ...
Contoh markup:
<ul id="menu">
<li> <a href="#"> Depan </ a> </ li>
<li> <a href="#"> Tentang </ a> </ li>
<li> <a href="#"> Layanan </ a> </ li>
<li> <a href="#"> Portofolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Hubungi Kami </ a> </ li>
</ Ul>
Anda dapat membuat beberapa CSS, mirip dengan yang di bawah ini, untuk transfrom markup di atas ke dalam menu vertikal ....
Contoh CSS ...
# Menu {
0; padding:: margin 0; background: # FF9900;
daftar ala-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px # FFF padat;
}
Hasil yang Anda akan melihat ...
Solusi untuk ini bug ... (diubah / ditambahkan CSS dalam huruf miring tebal)
# Menu {
0; padding:: margin 0; background: # FF9900; daftar ala-type: none; width: 150px;
float: kiri; / * ini berisi daftar item melayang * /
}
# Menu li {
0; padding:: margin 0;
float: kiri; / * ini perbaikan tersebut * /
width: 100%; / * spasi bug di IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px # FFF padat;
}
Jika doesnot solusi di atas tampaknya bekerja (untuk alasan dikenal IE6 saja) ... mencoba metode ini bukan
Hanya menambahkan ini gaya tambahan hanya IE6 untuk markup Anda ...
<- [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah , IE6 , Tutorial | diposting di quirks Browser , CSS
2008 12 April 2008
Pasang IE 6, MSIE telah cukup baik untuk kita UI pengembang dengan menambahkan lebih beberapa properti CSS standar untuk sebagian besar browser standar lainnya. Salah satu properti berguna seperti di "min-height". Properti cukup lurus ke depan yang perlu ada penjelasan panjang lebar. Ketika min-height untuk divisi yang dibuat, selalu mempertahankan bahwa tinggi set bila konten itu rumah menempati kurang dari itu bisa memegang dan penting (tidak seperti "tinggi" vanili properti polos) skala atau dengan kata CSS, itu berperilaku seperti divisi yang "tinggi" diatur ke "auto" ...
Bagi sebagian dari kita pengembang miskin, yang masih diperlukan untuk kode CSS yang juga harus bekerja di IE6, un-ketersediaan dari "min-height", bisa membuktikan stopper kadang ... keputusasaan Donot.
Untungnya, kami memiliki kebiasaan cukup di IE, bahwa kami akan gunakan untuk keuntungan keluar dan hack jalan kita melalui untuk mencapai tujuan kami ... yaitu membuat sebuah divisi DIVISI seakan nya min-height di IE6
Solusi 1: Menggunakan Hack Underscore [ ... Read more ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}
HTML: -
<div class="box1">Some dynamic content with variable height ...</div>
Solusi 2: Menggunakan Atribut CSS Hack Pemilih
.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}
HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>
Atribut CSS Hack Pemilih mengambil keuntungan dari fakta browser IE6 sebelumnya tha mengabaikan sebuah atribut-pemilih. Perhatikan kebutuhan divisi lain wadah dengan kelas "SomeClass" =. Hanya Hadirnya atribut class untuk divisi ini, menimpa tinggi kembali ke mobil untuk Opera, Mozilla dan MSIE7 dan kemudian. IE6, yang tidak mendukung penyeleksi atribut, mengabaikannya.
Lihat Demo hack min-height untuk IE6
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah , IE6 , Tutorial | diposting di CSS
2008 15 Maret 2008
Pada beberapa kesempatan, saat melakukan layout halaman dengan divisi popup / lightboxes / Tips sebagainya kami menemukan situasi dimana objek Formulir beberapa SELECT terjadi menjadi di bawah Divisi POPUP, dengan desain dan itu menunjukkan melalui .... YUK!
Nah! Anda dapat dengan mudah FIX ini dengan menyesuaikan Z-INDEX Anda nilai tepat untuk FF dan IE7. Tapi Good Old (pun intended) IE6 tidak berperilaku sebagaimana dimaksud .... Acara SELECT BOX melalui, bahkan setelah Anda menerapkan beberapa Z-INDEX drastis tinggi nilai-nilai ke Divisi PopUp Anda ... Nyebelin!
Tidak ada perbaikan untuk masalah ini, tetapi ada, saya yakin, lebih dari beberapa cara untuk bekerja-masalah ini, Tapi Im sini untuk memberitahu Anda solusi yang paling sederhana yang saya gunakan, yang bekerja dengan baik bagi saya, di sebagian besar kasus ....
"HIDE THE BOX ROUGE SELECT KETIKA ANDA MENAYANGKAN POPUP"
Cukup dalam potongan skrip Anda di mana Anda menunjukkan popup, tambahkan sepotong script untuk menetapkan visibilitas Kotak SELECT untuk "Tersembunyi"
document.getElementById ('my_select') style.visibilty = "tersembunyi".;
Dan ingat untuk mengatur kembali di TUTUP Divisi PopUp Anda
document.getElementById ('my_select') style.visibilty = "terlihat".;
dimana "my_select" adalah ID dari Kotak iritasi SELECT
Semoga ini bisa membantu ...
PS. Ada pilihan lain seperti ofcourse dinamis positionining sebuah IFRAME (ukuran yang sama seperti Anda PopUp) di bawah DIV Popup ... ini bekerja dengan baik juga, tapi ditambah dengan banyak Elemen DOM, script dan Sakit kepala. Saya telah menggunakan solusi ini juga, dan Jika Anda memerlukan bantuan dengan pilihan ini, jangan beritahu saya. Akan senang untuk membantu!
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah , IE6 | diposting di quirks Browser , CSS , HTML , JavasScript
2008 8 Januari 2008
Beberapa bulan sebelumnya kami melihat, bagaimana kita bisa termasuk bagian dari CSS yang akan terlihat ke IE6 saja ( Untuk Anda Hanya IES ). Ada cara lain untuk mencapai hal ini juga. Cukup menyertakan CSS terpisah, khusus untuk IE target Anda. ini dapat dicapai dengan apa yang disebut sebagai Komentar Bersyarat.
Komentar Bersyarat adalah cara untuk mendeteksi jenis browser dan versi. Browser deteksi dilakukan untuk memastikan bahwa konten disampaikan kepada spesifik browser. Deteksi browser dapat dilakukan dengan menggunakan teknik yang berbeda. Metode ini memiliki beberapa keunggulan dibandingkan metode sebelumnya, yang mencakup gaya beralih menggunakan javascript. Untuk daftar beberapa penting, akan menjadi;
- Scripting tidak diperlukan
- Lintas-browser
Bagaimana kita melakukan ini?
Lakukan sesuatu di IE 5 hanya
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Lakukan sesuatu di Semua versi IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Lakukan sesuatu di Semua versi IE yang lebih baru bahwa IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
Untuk vartiations bersyarat lebih lanjut, baca info ini di MSDN:
Tentang Komentar Bersyarat
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah | diposting di quirks Browser , CSS , HTML , JavasScript
2007 8 September 2007
Jika Anda telah menulis CSS untuk sementara, Anda harus mengalami saat-saat ketika Anda benar-benar menarik rambut Anda ketika Anda CSS layout tampak baik-baik di semua browser baru (maksudku browser lambat IE6), tapi IE 6 marah-marah. Anda berjuang keras untuk menyesuaikan CSS Anda tetapi tidak bekerja ... Nah! Cobalah hacks ini ...
1. Menggarisbawahi Hack: -
Menurut definisi, CSS 2.1 spesifikasi memungkinkan underscore ("_") dalam pengidentifikasi CSS. Tapi banyak browser tampaknya masih mengabaikan mengidentifikasi melanjutkan dengan menggarisbawahi tapi IE. Bug ini IE / fitur demikian menjadi cara yang sangat jelas untuk mengatur properti CSS untuk IES saja. jadi ingat, Sebuah properti CSS ditulis dengan garis bawah pada awal terlihat untuk Internet Explorer (semua versi tapi IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}
Lihat demonstrasi ini menggarisbawahi hack
Juga, Hack min-height untuk IE6 hack menggunakan underscore, memeriksa
2. Hash (#) Hack: -
Seperti underscore hack, yang satu ini juga adalah untuk IES oly, dengan perbedaan baik, properti pengidentifikasi didahului dengan # pada awal terlihat untuk Semua versi IE, IE7 termasuk dan tidak terlihat untuk setiap browser standar lainnya.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
Hack ini telah digunakan baik untuk menunjukkan cross browser vertikal menyelaraskan solusi, kita lihat di artikel ini untuk mengetahui lebih kami
3. CSS untuk IE6 saja: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}
Hacks ini tampaknya surga dikirim, bila tidak ada lagi bekerja ... Jika salah satu hacks menghemat hidup Anda suatu hari nanti, jangan lupa untuk memperlakukan saya ke kopi :)
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah | diposting di quirks Browser , CSS , JavasScript
2007 12 Juli 2007
Aku punya masalah di mana, jika Anda memiliki acara Gunaka mouse pada pembagian (DIV) dan divisi yang, untuk beberapa alasan yang baik harus transparan (seperti Dalam kasus saya, di mana hal ini merupakan persyaratan untuk menampilkan beberapa tag di gambar pada mouseover dari pembagian transparan), IE gagal untuk memicu acara Gunaka mouse (Bekerja dengan baik di FireFox).
Beberapa pilihan Mencoba ... banyak yang hanya upaya putus asa untuk mendapatkan acara untuk api di IE. Salah satu yang masuk akal, yang saya pikir mungkin bekerja adalah untuk mengatur warna latar belakang untuk divisi dan mengatur opacity menjadi nol ... Nah! berkat kerja!
Solusi terakhir yang tampaknya bekerja dan tidak mengganggu fungsi yang saya butuhkan adalah untuk menempatkan satu pixel diulang / gambar latar belakang transparan dalam divisi yang
Konyol ...! tapi sekarang IE tampaknya bahagia.
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah | diposting di quirks Browser
2007 11 Juni 2007
Sederhana ... Untuk memperbaiki masalah tampilan ini digunakan: inline.
div {float:left;margin:40px;display:inline;}
Jika Anda memiliki elemen mengambang seperti div dan Anda menempatkan margin-right atau margin-kiri pada elemen yang, Internet Explorer 6.0 akan dua kali lipat nilai margin, mengacaukan tata letak html / css. Untuk mengatasinya cukup menambahkan display: inline; ke elemen mengambang Anda.
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah , IE6 | diposting di quirks Browser , CSS
