Tag: ie

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

    CSS : เมื่อต้องเจอปัญหากับ 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]

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