Categories
CSS HTML

CSS : เมื่อต้องเจอปัญหากับ IE

เชื่อว่าหลาย ๆ คนที่เขียน CSS กันมา ต้องเจอปัญหาว่า ทำไมเขียน CSS มาแล้ว แต่ละ Browser ถึงแสดงผลมาไม่เหมือนกัน และในบรรดา Browser ทั้งหลาย Browser ที่มีปัญหามากที่สุด ก็คงไม่พ้น Internet Explorer หรือที่เราเรียกกันว่า IE

เชื่อว่าหลาย ๆ คนที่เขียน 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]

ทุกคนก็ลองเอาไปประยุกต์ใช้ให้เหมาะสมกับเรามากที่สุดแล้วกันนะครับ

13 replies on “CSS : เมื่อต้องเจอปัญหากับ IE”

ขอบคุณค้าบบบบ
เหนื่อยใจกับ IE เมื่อไหร่จะหมดไปจากโลก >w<

ผมก็ไปเจอะเว็บฝรั่งเค้าเขียนไว้ เรื่องเมื่อเจอลูกค้าอยากได้เว็บแสดงได้ใน IE เก่าๆ เค้าบอกต้องคิดตังค์เพิ่มอีก ประมาณ 40% ครับของราคาปกติ เพราะต้องมัวแต่แก้ปัญหากับกรรณีเว็บเพี้ยน ขอบคุณที่เขียนเรื่อง Hack CSS เข้าใจง่ายดี อิอิ

ไม่มี IE9 หรอครับ จะเขียนแบบ IE8 รึเปล่าเพราะผมเอาไปใช้แล้วมันไม่แสดงผลอ่ะครับ

ขอบคุณสำหรับความรู้นี้ครับ เพิ่งแก้ได้สดๆร้อนๆเลย
จาก ที่ชาวบ้านเค้า margin-bottom:-0px;.
แต่ ie8 ต้องแก้ไปเป็น {margin-bottom:-100px; } ถึงจะดูได้ใกล้เคียงชาวบ้านเค้า
มันช่างต่างกันโดยสิ้นเชิง

Leave a Reply

Your email address will not be published. Required fields are marked *