Mengekspresikan TI

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.

Bukan berarti hanya ada beberapa lightbox yang dapat Anda temukan ketika Anda google. Masalah dengan sebagian besar lightboxes yang saya temukan adalah bahwa mereka semua tampaknya menggunakan satu atau kerangka JAVASCRIPT berat lainnya berat seperti jQuery, Prototype, MooTools dan sejenisnya. Mereka semua keren dan megah mencari. Tapi Jika kebutuhan Anda adalah "TAPI Aku INGIN SCRIPT lightbox SEDERHANA DAN RINGAN UNTUK SITUS SAYA", maka di sini adalah;

Beberapa fitur bagus lightbox ini

1. Sangat ringan
   a. 4KB Script ketika dikemas (8 kb membongkar)
   b. 2 kb CSS
   c. Beberapa baris HTML untuk wadah lightbox
2. Sederhana untuk memahami dan melaksanakan
3. Dapat memiliki beberapa lightboxes pada halaman yang sama.
4. Wadah lightbox sama digunakan untuk menunjukkan, isi yang berbeda (yang terpisah dimasukkan sebagai divisi tersembunyi di halaman), tergantung pada link / option yang diklik.
5. Secara otomatis pusat sendiri, dengan mempertimbangkan semua faktor-faktor seperti, tinggi Window dan lebar (resolusi layar), jumlah halaman gulir dan tinggi dari isi lightbox itu
6. Diuji di IE 7 & FF

Lihat Demo |
Ambil Lightbox Sumber Zip (download 1794 kali)

jo.js, jo_pack.js [versi dikemas]: - satu set sederhana JAVASCRIPT OBJECTS [JO], yang berisi elemen, jendela dan skrip dokumen positioning. Anda dapat membuka JO.JS jika Anda ingin mendapatkan tangan Anda kotor dengan beberapa Javascripting Lanjutan, menciptakan fungsi abstrak, memperluas sifat unsur dan semacamnya. Jika Anda tidak terlalu banyak dalam Javascripting, Biarkan saja.

lightbox.js, lightbox_pack.js [versi dikemas]: - Mengandung script kotak manajer cahaya. Jika Anda adalah halaman desainer, juga bertanggung jawab dengan menerapkan lightbox pada halaman, Anda perlu memahami LightBoxManager tersebut. LightBoxManager pada dasarnya berisi showLightBox hanya dua fungsi dan closeLightBox.

lightbox.css: - Jika Anda tahu CSS, Anda dapat memutar sekitar dengan lightbox.css untuk menyesuaikan tampilan-n-merasa lightbox.css

index.html: Contoh pelaksanaan lightbox dengan dua isi yang berbeda

lb_underlay_bkg.png: - Ini adalah cahaya / Simi gambar transparan yang digunakan latar belakang untuk mendasari lightbox [mendasari adalah lapisan bawah lighbox, yang mencegah pengguna dari mengklik entitas lain pada halaman, sementara lightbox terbuka]. Anda dapat menggunakan gambar atau bahkan warna yang solid untuk tujuan ini, tergantung pada desain halaman dan kebutuhan.

icon_lb_close.gif: - Gambar untuk menangani lightbox dekat di kanan atas dari kotak cahaya. Bisa menggunakan gambar apapun sesuai desain

Lihat Demo |
Ambil Lightbox Sumber Zip (download 1794 kali)

Silakan beritahu kami memiliki komentar dan umpan balik ...

Posting ini mungkin menjadi contoh yang baik untuk frase "nenek Pengajaran menyedot telur" ... Karena ini hanya BASIC CSS Stuff. Tetapi bagi mereka, seperti saya menyadari, ini mungkin menjadi berkah tersembunyi. Saya selalu berpikir (saya bisa kehilangan pekerjaan saya karena mengatakan ini), itu HANYA mungkin menyimpan beberapa bagian dari isi halaman HTML statis (artinya, posisinya tetap ADANYA pada Geser Window), menggunakan beberapa script pintar, Melakukan semua ilmiah perhitungan untuk menemukan posisi yang dinamis, menjebak peristiwa Window.scroll dan pengaturan timeout dll

Pernah berpikir itu bisa sederhana seperti ini .... Di sini di CSS / HTML di bawah, saya memiliki empat blok statis, satu tetap ke setiap extrimities halaman, TOP, KANAN, KIRI BAWAH dan ... tentu saja ... Anda dapat memilih salah satu atau lebih jika perlu menjadi ...

CSS
Statis {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; posisi:. Ixed;
}
# Isi {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}

# Wrap {-l top: 80px; background: # FF9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6; kanan: 0;}

HTML
id="contents"> <div Anda isi halaman utama </ div>
<div id="wrap-b" class="static">
Static Content di bagian bawah halaman
</ Div>
<div id="wrap-t" class="static">
Static Content di Atas Halaman
</ Div>

<div id="wrap-l" class="static">
Static Content pada Halaman meninggalkan
</ Div>
<div id="wrap-r" class="static">
Static Content di sebelah kanan halaman
</ Div>

Lihat sampel wroking sini

Banyak kali kita merasa perlu untuk menulis hacks Browser specfic (meskipun bukan praktik yang baik, kita pengembang UI harus resor untuk kejahatan tersebut sampai Perang Browser besar datang untuk gencatan senjata). Sebelumnya, saya telah disebutkan dalam artikel ini Untuk Anda IES Hanya , bagaimana menulis potongan CSS yang akan dapat dilihat oleh browser IE <IE7 saja.

Kemarin, saya punya kasus, di mana saya ingin menulis beberapa FireFox spesifik CSS potongan. Nah! Saya tidak yakin jika ada kode CSS untuk ini, tetapi ada HTML. ADA CATCH A MESKIPUN, ini bagian dari validasi HTML lulus doesnot HTML. Tapi, anywaz! Jika Anda terjebak buruk atau seperti itu, tidak memiliki hal-untuk validasi (terkadang kita harus kejam), Anda bisa menggunakan berikut untuk menyatakan link ke stylesheet FF saja atau bahkan hanya kode CSS dalam blok ini. Kode ini

<comment> Masukan Anda FireFox hanya HTML / CSS / Script di sini </ komentar>

misalnya
<comment>
<style>
/ * Styles hanya untuk FF * /
fieldset {border: 1px # dddddd padat;}
</ Style>
</ Komentar>

I "m senang untuk saat ini ...

Oh Yah! Dalam posting sebelumnya beberapa hari lalu tentang Opacity di IE8, saya lupa menyebutkan poin penting bahwa "IE 8 modus ketat tidak memungkinkan untuk CSS opacity".
Bagi mereka yang donot memahami apa yang saya maksud dengan modus yang ketat, di sini adalah tutorial singkat .

Sebuah karya sekitar untuk ini (Sebelum tim dev IE menyadari bahwa mereka telah membuka jalan untuk kembali bekerja rutin di seluruh dunia, untuk web-situs menggunakan pop-up lightboxes dengan opacity tertentu, dan dikembalikan dukungan untuk Opacity) adalah dengan menggunakan gambar semi transparan ... sebaiknya dalam format PNG (Saya telah memiliki pengalaman buruk mendapatkan gambar GIF transparan untuk bekerja sebagai mereka seharusnya). Buat gambar PNG dari warna dan persentase transparansi Anda suka, Anda dalam editor foto favorit dan menggunakannya sebagai gambar latar belakang untuk overlay lightbox Anda.

yaitu
Alih-alih sesuatu seperti ini

. Lighbox_overlay {
background-color: # ffffff;
z-index: 1001;
-Moz-opacity: 0.6;
opacity: .60;
filter: alpha (opacity = 60);
}

Lakukan ini ....

. Lighbox_overlay {
background: url (bkg.png) ulangi;
}

UNTUK MENCOBA TI, KLIK DISINI! | UNTUK DOWNLOAD, KLIK DISINI!

Jika Anda melihat halaman ini di IE8, maka Anda harus melihat latar belakang putih buram penuh di belakang posting ini. Kemarin, collegue saya menunjukkan hal ini kepada saya (Karena saya salah satu orang yang beradaptasi dengan perubahan perlahan dan terus ... terutama browser. Mungkin mengatakan, Im pengecut, tapi biarkan saja .... Menjadi seorang pengembang UI, saya selalu kotoran takut versi browser baru ... Anda tahu apa Im tlaking sekitar, kan?)

Menggali sekitar untuk sementara, mencoba untuk menemukan solusi untuk memperbaikinya dan kemudian apa ...
Kali ini SEMUA WAKTU kita peramban FAVORIT telah melakukannya lagi dengan menjatuhkan semua dukungan untuk CSS opacity. Non-standar `filter: alpha (opacity = # #)` CSS atribut telah dihapus, Nice, tetapi mereka juga benar-benar lupa untuk menambahkan dukungan CSS3 opacity (seperti bagaimana semua browser lain yang baik menyimpannya dalam). Jadi, untuk pertama kalinya sejak TUHAN mengatakan kepada kami tentang CSS opacity (karena IE 5.0, saya kira), web browser tidak akan mendukung opacity CSS.
Dan sekarang untuk krim di atas: kata resmi dari IE 8 tim? Ini "dengan desain" dan "kami akan mempertimbangkan hal ini dalam versi masa depan IE".

PS: Lihat halaman ini di FF, bersumpah terlihat rapi!

Ketika saya membaca artikel ini di A List Apart " Positioning Absolute Faux
oleh Eric Sol ", saya tidak kurang dari IMPRESSED. Saya juga tertekan majorly, menyebabkan, jujur ​​saya bertanya-tanya, mengapa cant saya datang dengan sesuatu yang hebat seperti ini.

Biasanya, ketika kita membuat layout CSS, kita menggunakan "POSISI" atau "Floats", atau kombinasi yang sangat buruk dari keduanya. Eric Sol dan timnya mendefinisikan sebelah teknik yang sempurna tipe baru dari teknik tata letak CSS, yang mereka telah dibaptis sebagai "Positioning Absolute Faux" setelah teknik kolom palsu yang mensimulasikan keberadaan kolom.

Anda tahu bahwa masalah kita semua CSS pengembang harus dengan tata letak disintegrasi (Perubahan konten tidak terduga yang menyebabkan seluruh kolom untuk membungkus, ketika kita menggunakan layout melayang) ... Nah! Sepertinya Sejarah!
Teknik tata letak masih sangat muda, dan harus dibuang ke tempat sampah oleh semua guru CSS luar sana, sebelum menjadi sebuah standar tertulis un. Saya senang untuk menggunakannya SEKARANG! ... Dan saya sudah ke tengah mengkonversi sebelumnya bermasalah / mengambang saya un-tentu layout ke dalam layout FAP sudah ... dan saya senang untuk mengatakan "kami sudah menggunakan Positioning Absolute Faux untuk situs blog juga" ... GO mencobanya, SEKARANG!

Kudos Eric!

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] ->

Masukan stylesheet di Puncak

Jika Anda ingin halaman untuk memuat secara progresif; yaitu, kita menginginkan browser untuk menampilkan konten apapun itu secepat mungkin, menempatkan CSS di bagian atas halaman dalam HEAD dokumen. Hal ini membuat halaman muncul untuk memuat lebih cepat, karena hal ini memfasilitasi render progresif halaman. Hal ini sangat penting untuk halaman dengan banyak konten dan bagi pengguna koneksi internet lambat.

Ini adalah fakta yang terdokumentasi untuk meningkatkan pengalaman pengguna secara keseluruhan, penting untuk memberikan indikator kemajuan dan masukan visual. Untuk menghindari harus redraw elemen halaman, dalam kasus jika gaya perubahan mereka, beberapa browser, termasuk IE, blok rendering dari halaman sampai CSS diberi beban penuh. Karena itu, pengguna mendapat untuk melihat halaman putih kosong.

The W3 HTML Spesifikasi 'juga menyatakan bahwa CSS harus saya masukkan dalam bagian HEAD halaman HTML. at the bottom of the page, so it's best not to use it. Perlu diketahui juga bahwa, Dalam IE @import berperilaku sama dengan menggunakan <link> di bagian bawah halaman, jadi yang terbaik untuk tidak menggunakannya.

Hindari Menggunakan fitur Browser Tertentu

Filter: Gunakan filter meningkatkan konsumsi memori dan diterapkan secara per elemen, bukan per gambar, sehingga masalah dikalikan. Juga, Filter adalah IE Proprietary, maka tidak akan bekerja sebagaimana dimaksud pada browser lainnya. Jika Anda ingin latar belakang transparan atau gradien, gunakan 1Pixel dengan gambar.
Ekspresi: ekspresi CSS adalah fitur baik untuk memiliki dalam CSS, tapi masih adalah fitur spesifik IE. Juga, penting untuk dicatat bahwa, ungkapan-ungkapan yang dievaluasi saat halaman dirender dan diubah ukurannya, menggulir dan bahkan ketika pengguna bergerak mouse ke halaman. Tak perlu dikatakan ini dapat mempengaruhi kinerja dari halaman Anda. Oleh karena itu dalam kata-kata sederhana, Hindari menggunakan ekspresi CSS, kecuali jika Anda merasa kelebihan 'berat lebih dari kontra perusahaan

Externalise Anda CSS

Menggunakan CSS eksternal akan mengakibatkan loading lebih cepat dari halaman karena file-file JavaScript dan CSS cache oleh browser. Inline CSS pada dokumen HTML bisa didownload setiap kali dokumen HTML yang diminta. Ini sebenarnya bisa mengurangi jumlah permintaan HTTP yang dibuat tetapi kemudian meningkatkan ukuran dokumen HTML. Eksternal CSS cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.

Harap dicatat bahwa, jika pengguna di situs Anda memiliki pandangan beberapa halaman per sesi dan banyak dari halaman Anda kembali menggunakan script yang sama dan stylesheet, ada potensi manfaat yang lebih besar dari file eksternal cache.

Pack Anda File CSS

Packing atau berderak CSS Anda adalah praktek menghapus karakter yang tidak perlu dari kode untuk mengurangi ukurannya dengan demikian meningkatkan beban kali.

CSS dapat saya berderak dengan menghapus semua komentar dan karakter yang tidak diinginkan seperti ruang putih, baris baru dll

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