เชื่อว่าหลาย ๆ คนที่เขียน CSS กันมา ต้องเจอปัญหาว่า ทำไมเขียน CSS มาแล้ว แต่ละ Browser ถึงแสดงผลมาไม่เหมือนกัน และในบรรดา Browser ทั้งหลาย Browser ที่มีปัญหามากที่สุด ก็คงไม่พ้น Internet Explorer หรือที่เราเรียกกันว่า IE
ผมเองก็ไม่ทราบว่าด้วยเหตุผลอะไร IE ต่าง ๆ ถึงมีปัญหาในการแสดงผลที่แตกต่างกับชาวบ้านเค้า แถมตัว IE เองแต่ละเวอร์ชั่นก็มีการแสดงผลที่แตกต่างกันเองอยู่ด้วย แล้วเราจะมีวิธีแก้ปัญหาอย่างไรกันบ้าง มาลองดูกันครับ
CSS : สร้างเงื่อนไขให้ Tag html
[html]
<!–[if lt IE 7]> <html class="ie6"> <![endif]–>
<!–[if IE 7]> <html class="ie7"> <![endif]–>
<!–[if IE 8]> <html class="ie8"> <![endif]–>
<!–[if !IE]><!–> <html> <!–<![endif]–>
[/html]
กำหนดเงื่อนไขเลยครับ ว่าถ้าเป็น IE ที่เวอร์ชั้นตำกว่า 7 ให้ tag html นั้นมี class เป็น ie6 แล้วก็เขียนไล่ลำดับมาจนถึงว่า ถ้าไม่ใช่ IE ถึงจะแสดงผลมาเป็น tag html ที่ไม่มี class อะไร แล้วหลังจากนั้นเราจึงไปเขียน CSS ให้กับ element ที่มีการแสดงผลที่ไม่เหมือนชาวบ้าน อย่างเช่น
[css]
.box {margin-bottom:20px;}
.ie6 .box {margin-bottom:5px;}
.ie7 .box {margin-bottom:10px;}
.ie8 .box {margin-bottom:15px;}
[/css]
คือ .box ทั่วไปให้มี margin-bottom เท่ากับ 20px แต่ถ้าเป็นใน IE6 ให้มี margin-bottom แค่ 5px ใน IE7 ให้มี margin-bottom แค่ 10px และใน IE8 มี margin-bottom แค่ 15px
CSS : กำหนดเงื่อนไขในการเรียกใช้ CSS
[html]
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!–[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]–>
<!–[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]–>
<!–[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="css/ie8.css" /><![endif]–>
[/html]
วิธีนี้จะคล้าย ๆ กับวิธีแรกแต่ต่างกันที่วิธีแรกจะกำหนด class ให้กับ Tag html แต่วิธีนี้เราจะกำหนดให้แต่ละ Browser เรียกใช้ CSS ที่แตกต่างกันครับ ข้อสำคัญคือ เราจะต้องเรียกใช้งาน CSS หลักของเราก่อนบรรดา CSS ที่เป็นเงื่อนไขนะครับ
CSS : Hack CSS สำหรับ IE
สำหรับกรณีที่เราไปเปลี่ยนแปลง Code HTML ไม่ได้ งั้นมาแก้ไขที่ตัว CSS แล้วกัน ด้วยการ Hack CSS สำหรับ IE โดยเขียนแบบนี้
[css]
.box {margin-bottom:20px;} /* ทุก browsers */
* html .box {margin-bottom:5px;} /* สำหรับ IE6 */
*+html .box {margin-bottom:10px;} /*สำหรับ IE7 */
.box {margin-bottom:20px\0/;} /* สำหรับ IE8 */
[/css]
ทุกคนก็ลองเอาไปประยุกต์ใช้ให้เหมาะสมกับเรามากที่สุดแล้วกันนะครับ