รับทําเว็บไซต์ รับทําseo

Product & Service

เกี่ยวกับ Softmelt

Help ช่วยเหลือลูกค้า

บทความ Softmelt

Of The Week

สนามบินสมุย - บางกอกแอร์เวย์ส
สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)
 
รับทําเว็บไซต์ รับทําseo

Webmaster

บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

วิธีการ hack CSS ให้รองรับการแสดงผลบน IE

แชร์
    ปวดหัวเหลือเกินกับคุณ IE ที่ไม่ยอมสูญพันธ์เสียที บางทีเสียเวลาเกือบทั้งวันเพื่อแก้ปัญหาใน CSS ที่แสดงผลผิดเพี้ยนใน IE6 ทั้งๆที่ชาวบ้าน (ชาวบ้าน ได้แก่ IE7 ขึ้นไป , firefox และ safari) เขาแสดงผลได้ปกติ ปัญหานี้ไม่ใช่เป็นปัญหาระดับรากหญ้าเฉพาะในประเทศไทยเท่านั้นนะครับ ทั่วโลกก็เป็นปัญหานี้อยู่ (ฟังดูยิ่งใหญ่มาก) 

    ผมเองก็ไม่ทราบว่าด้วยเหตุผลอะไร IE ต่าง ๆ ถึงมีปัญหาในการแสดงผลที่แตกต่างกับชาวบ้านเค้า แถมตัว IE เองแต่ละเวอร์ชั่นก็มีการแสดงผลที่แตกต่างกันเองอยู่ด้วย แล้วเราจะมีวิธีแก้ปัญหาอย่างไรกันบ้าง มาลองดูกันครับ

    CSS : สร้างเงื่อนไขให้ Tag html

    1 <!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
    2 <!--[if IE 7]>         <html class="ie7"> <![endif]-->
    3 <!--[if IE 8]>         <html class="ie8"> <![endif]-->
    4 <!--[if !IE]><!-->     <html>             <!--<![endif]-->

    กำหนดเงื่อนไขเลยครับ ว่าถ้าเป็น IE ที่เวอร์ชั้นตำกว่า 7 ให้ tag html นั้นมี class เป็น ie6 แล้วก็เขียนไล่ลำดับมาจนถึงว่า ถ้าไม่ใช่ IE ถึงจะแสดงผลมาเป็น tag html ที่ไม่มี class อะไร แล้วหลังจากนั้นเราจึงไปเขียน CSS ให้กับ element ที่มีการแสดงผลที่ไม่เหมือนชาวบ้าน อย่างเช่น

    1 .box {margin-bottom:20px;}
    2 .ie6 .box {margin-bottom:5px;}
    3 .ie7 .box {margin-bottom:10px;}
    4 .ie8 .box {margin-bottom:15px;}

    คือ .box ทั่วไปให้มี margin-bottom เท่ากับ 20px แต่ถ้าเป็นใน IE6 ให้มี margin-bottom แค่ 5px ใน IE7 ให้มี margin-bottom แค่ 10px และใน IE8 มี margin-bottom แค่ 15px

    CSS : กำหนดเงื่อนไขในการเรียกใช้ CSS

    1 <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    2 <!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  /><![endif]-->
    3 <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  /><![endif]-->
    4 <!--[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="css/ie8.css"  /><![endif]-->

    วิธีนี้จะคล้าย ๆ กับวิธีแรกแต่ต่างกันที่วิธีแรกจะกำหนด class ให้กับ Tag html แต่วิธีนี้เราจะกำหนดให้แต่ละ Browser เรียกใช้ CSS ที่แตกต่างกันครับ ข้อสำคัญคือ เราจะต้องเรียกใช้งาน CSS หลักของเราก่อนบรรดา CSS ที่เป็นเงื่อนไขนะครับ

    CSS : Hack CSS สำหรับ IE
    สำหรับกรณีที่เราไปเปลี่ยนแปลง Code HTML ไม่ได้ งั้นมาแก้ไขที่ตัว CSS แล้วกัน ด้วยการ Hack CSS สำหรับ IE โดยเขียนแบบนี้

    1 .box {margin-bottom:20px;} /* ทุก browsers */
    2 * html .box {margin-bottom:5px;} /* สำหรับ IE6 */
    3 *+html .box {margin-bottom:10px;} /*สำหรับ IE7 */
    4 .box {margin-bottom:20px0/;} /* สำหรับ IE8 */

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com