Mengekspresikan TI

Waktu dan lagi, Ketika semua browser lain terlihat berperilaku seperti yang diceritakan oleh aturan W3C, spiral IE Anda keluar dari semangat pembangunan dengan emosi yang meledak, yang tampaknya tidak memiliki memperbaiki. Hanya orang seperti itu adalah masalah di IE7.

Soal Pernyataan:
Saya dan mungkin banyak pengembang web lain serius telah memperhatikan lebih dari banyak kali, bahwa ketika ada bersarang mengapung dalam tata letak, di hover lebih beberapa link (anchor tag), wadah yang mengandung tampaknya bergeser beberapa piksel ke kanan . Saya telah mencoba untuk google untuk solusi masalah ini, tapi hampir tidak ditemukan adanya jawaban yang masuk akal mengapa dan ketika itu terjadi (yang mungkin bisa membantu untuk mencegah masalah ini terjadi), maka saya tidak pernah menemukan solusi yang jelas untuk masalah baik ...

Kemungkinan Solusi:
Dari pengalaman, saya memiliki persen pemberitahuan 90% yaitu kali, bahwa masalah ini adalah tetap dengan menambahkan properti zoom dalam definisi CSS wadah salah berperilaku ...

 # Somediv {
       zoom: 1;
 }

lagi alasan tidak jelas ... coba ini ...
Beberapa elemen di IE memiliki "hasLayout" properti, yang "benar" secara default. Banyak visual yang CSS perilaku, misalnya, filter alpha hanya bekerja pada sebuah elemen yang hasLayout. dan {Zoom: 1} tampaknya memberikan elemen target properti hasLayout .... Berguna? Aku nggak berpikir begitu ...

Properti zoom juga tampaknya didukung oleh Chrome, tapi berkat penggunaannya tampaknya membuat banyak efek buruk pada layout saya ... mencobanya, Jika berhasil untuk Anda ... jika tidak, bookmark halaman ini di bawah "craps CSS"

Google mulai orang gerakan prompt untuk membuang IE6 ... By pengguna mengganggu IE6 dengan POPUP di buka halaman ... mungkin bukan ide yang sangat baik ... tapi menjadi pengembang UI, saya harus bergabung dengan band wagon ... satu browser yang kurang untuk saya khawatir tentang Maaf ... egois itu! tapi saya termasuk javascript ini ... (TRY HALAMAN INI DALAM IE6) ...
Hei! dan pada catatan cerah ... Lihat itu adalah tampilan POWER dari JAVASCRIPT .... bahkan dapat menurunkan raksasa (atau sekali itu)

SO ... Bantuan membebaskan dunia dari IE6 dengan satu baris javascript!

http://code.google.com/p/sevenup/

Jika Anda css orang, Anda akan tahu rasa sakit dalam mendapatkan layout Anda bekerja lintas-browser. IE8 adalah satu lagi kunci pas dalam karya-karya untuk pengembang kami. Anywaz! jika Anda memukul atas masalah ini, Seperti yang saya lakukan kemarin, di mana CSS sempurna bekerja di IE7 (dan sebelumnya) dan Firefox tiba-tiba mulai melemparkan amukan di IE8, TRY ini ... Ini baik tampaknya untuk memperbaiki masalah saya untuk saat ini ....

Menggunakan deklarasi Meta, kita dapat menentukan mesin rendering kami ingin IE8 untuk digunakan. Jadi untuk memaksa IE8 untuk membuat sebagai IE7 ... Masukkan Meta Tag berikut ke dalam kepala dokumen Anda: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Secara default Meta IE akan: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
yang akan membuat IE8 membuat halaman menggunakan mode standar baru.

Jika diperlukan, sintaks ini dapat digunakan untuk mengakomodasi untuk browser lain sebagai berikut:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

LEBIH Tentang DOCTYPES:

JIKA Anda belum terbiasa dengan jenis hewan yang disebut "DOCTYPE" ... di sini adalah beberapa membaca cepat
Apa DOCTYPES? Apa BROWSER quirks mode & HUKUM?
Mengatur DOCTYPE dalam XSL

Untuk lebih dalam pemahaman mendalam tentang DOCTYPES, coba kunjungi link ini ...
A List Apart: Perbaiki Situs Anda Dengan DOCTYPE Benar!
A List Apart: Beyond DOCTYPE: Standar Web, Teruskan Kompatibilitas, dan IE8

Catatan: Meskipun banyak dari kita HTML / CSS orang telah mengabaikan pentingnya decleration DOCTYPE dalam dokumen kita, Mengatur DOCTYPE yang tepat, biasanya jawaban untuk masalah browser yang paling silang.

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

• Bersyarat Komentar: Untuk Hanya-Bagian Duex IES Anda
• CSS hack: Javascript, CSS, HTML untuk Firefox hanya
• Untuk Anda Hanya IES

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.

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!

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

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

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!