CSS Browser Selector

    ปัญหาการแสดง CSS ที่แตกต่างกันระหว่าง Browser ปัญหานี้เป็นปัญหาที่ ค่อนข้าง Classic สาเหตุเนื่องมากจาก Browserแต่ละตัวใช้ Rendering Engine ที่แตกต่างกันครับ

    ปัญหาที่เกิดขึ้นก็คือเราจะได้หน้าตาของ Page ที่แต่ต่างกันอาจจะแตกต่างกันเล็กน้อยหรือถึงขั้นใช้งานไม่ได้เลยก็มี แม้ว่าจะเป็น Browser เดียวกันก็ตามแต่แตกต่างกันที่ Version ก็แสดงผลไม่เหมือนกันแต่วันนี้ผมมีตัวช่วยที่จะมาช่วยแก้ปัญหานี้ครับ

ยกตัวอย่างปัญหาที่เจอ

    ie6, ie 7 ไม่ Supports CSS min-width แต่ ie8 สามารถ ทำงานได้ แต่ ให้ความยาวไม่เท่ากับ iE9 และ Chome ,Firefox เฮอฟังดูแล้วถ้อนะครับ

วิธีแก้ไข ให้ refer script css_browser_selector.js  ไว้ที่ Page ที่เราต้องการจากนั้นให้ใส่ styles



ในส่วนของ styles

/*browser อื่น*/
#divStep6 {

min-width: 400px;

}

/*Fix By Ie 6*/

.ie6 #divStep6 {

height: 300px;

}

/*Fix By Ie 8*/
.ie8 #divStep6 {
min-width: 340px;
}

ตัวอย่างการใช้งานอื่น

<style type="text/css">

.ie .example {

background-color: yellow

}

.ie7 .example {

background-color: orange

}

.gecko .example {

background-color: gray

}

.win.gecko .example {

background-color: red

}

.linux.gecko .example {

background-color: pink

}

.opera .example {

background-color: green

}

.konqueror .example {

background-color: blue

}

.webkit .example {

background-color: black

}

.example {

width: 100px;

height: 100px;

}

.no_js { display: block }

.has_js { display: none }

.js .no_js { display: none }

.js .has_js { display: block }

</style>

รายชื่อ Rendering Engine(ตัวนี้จะเป็นตัวที่เราใช้ แยกแยะ Browser)



อ้างอิงมาจาก http://rafael.adm.br/css_browser_selector/

Source css_browser_selector

Leave a Reply