Saat ini saya sedang membangun sebuah aplikasi web yang harus compatible dengan sebanyak mungkin browser yang ada di dunia, tidak terkecuali pendatang baru, Google Chrome dan versi terbaru dari Internet Explorer 8 Beta 2. Aplikasi tsb dibangun dari scratch, dimulai dari MasterPage. Ketika MasterPage di-apply pada page pertama, page tsb dapat ditampilkan dengan baik dan persis sama pada semua browser yang terinstall di laptop. Kebahagiaan itu segera berakhir ketika mencantumkan control asp:Menu untuk keperluan pemenuan.
Ternyata IE 8 Beta 2 tidak bisa menampilkan sub menu dari asp:Menu, they're displayed just blank. Beginilah tampilan control asp:Menu pada beberapa browser.
IE 8 Beta 2
Seperti itulah tampilan asp:Menu pada IE 8 Beta 2. Ketika sebuah menu (yang memiliki sub menu) di-hover (mouse over), hanya border dari sub menu yang ditampilkan, isinya kosong dan transparent.
IE 7 Compatibility
Fortunately, di IE 8 ada button
di dekat address bar, untuk menampilkan web page dalam tampilan Compability View yang compatible dengan IE 7. Jika button tersebut diklik, contol asp:Menu - yang ditulis dengan code (declarative code dan CSS styles) yang sama - bisa di-render menjadi seperti berikut, which is the right thing.
Sekarang mari kita lihat hasil render pada beberapa browser lain.
Google Chrome
Mozilla Firefox 3
Opera 9
Semuanya persis sama. So pertanyaannya, what's wrong with IE 8?
Sebagai informasi, saya menggunakan asp:Menu bersama dengan ASP.NET 2.0 CSS Friendly Control Adapters 1.0, yang bisa me-render menu dengan tampilan lebih baik, lebih friendly terhadap CSS, dan much configurable dengan CSS. Saya kira penggunaan adapter tsb yang membuat masalah dengan IE 8. Tapi setelah digunakan pure asp:Menu, hasilnya tetap sama.
Setelah google-ing, live-ing, dll, ternyata beberapa orang mengalami hal yang sama. Belum ada workarounds yang resmi dari Microsoft, seperti yang bisa dilihat di https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=364930. Di forum asp.net, ada yang berpendapat bahwa mungkin karena IE 8 masih beta.
As far as I know, sementara ini yang dapat dilakukan adalah "memaksa" IE 8 untuk mem-render page yang compatible dengan IE 7. Caranya adalah dengan menggunakan tag berikut paga bagian <head>:
<head>
<!-- Use IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
If anyone can tell the better way, without having to emulate IE 7, please let me and others know. Looks like IE 8 needs more attention before release it to RTM.
That's it, enjoy.