24 พฤษภาคม 2555, 12:49:29
ยินดีต้อนรับผู้เยี่ยมชม
  • noavata
  • ยินดีต้อนรับคุณ, ผู้เยี่ยมชม กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
    เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
  • คุณมีสิทธิ์: ที่จะแบ่งปัน * * * *
Page Rank

ทำเว็บไซต์ | แต่งบอร์ด | ออกแบบ | SMF | Joomla | Drupal | WordPress | JQuery | CMS | ECommerce | Tel. +668-08577477

-:-DexMoreGroup แหล่งมั่วสุมทางปัญญา-:- linktree Web Achieve linktree Web Basis linktree Cascading Style Sheet

CSS IE Bugs แมลงร้ายในไออี 6 .... [ปัญหาและแนวทางการแก้ไข]

ส่งหัวข้อนี้พิมพ์ หน้า: 1 
icon message ผู้เขียน หัวข้อ: CSS IE Bugs แมลงร้ายในไออี 6 .... [ปัญหาและแนวทางการแก้ไข]  (อ่าน 1090 ครั้ง)
0 สมาชิก และ 2 ผู้เยี่ยมชม กำลังดูหัวข้อนี้
SMF ModifyNusZz-*
*
***



Thailand   ชาย ผู้เริ่มต้นกระทู้นี้ ออฟไลน์ เว็บไซต์
icon message
general เมื่อ: 28 กุมภาพันธ์ 2553, 19:32:38
บทความทั้งหมดเป็นของ http://www.select2web.com และผู้นำมาเผยแพร่ต่อในเว็บไซต์คือ NusZz-*

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

ปัญหานี้ไม่ใช่เป็นปัญหาระดับรากหญ้าเฉพาะในประเทศไทยเท่านั้นนะครับ ทั่วโลกก็เป็นปัญหานี้อยู่ (ฟังดูยิ่งใหญ่มาก)

เมื่อปัญหายังไม่หมดไป และเราก็ยังต้องเจอกับมันอยู่ ก็จำเป็นอย่างยิ่งที่จะต้องนำวิธีแก้ัปัญหาคุณอีมาเผยแพร่ เพื่อเป็นแนวทาง เป็นคู่มือ เป็นที่้อ้างอิงสำหรับนักพัฒนาเว็บไซต์ ที่หันมาใช้ css ในการออกแบบกันเป็นส่วนใหญ่ (ที่ใช้ตารางวางเลย์เอาต์ คิดว่าน่าจะยังมี แต่คงน้อยเต็มที)

จากบทความของฝรั่งต่างชาติดังกล่าว ผมได้เอามาขัดเกลาเข้าสู่ภาษาแห่งสยามชาติ ดังนี้ :

Internet Explorer จัดได้ว่าเป็นหายนะ(bane) สำหรับนักพัฒนาเว็บไซต์ในยุคปัจจุบัน มากกว่า 60 เปอร์เซ็นต์ของเวลาพัฒนาเว็บไซต์ต้องหมดไปกับการมัวแก้ปัญหาคุณไอ้อี(ie)  ดังนั้น วันนี้จึงอยากจะแนะนำ 9 วิธีสำหรับการแก้ปัญหา(โลกแตก) นั่น

1. Centering a Layout

การจัดวางเลย์เอาต์ให้อยู่ตรงกลาง ปกติคำสั่ง margin: auto;  เลย์เอาต์ก็จะอยู่ตรงกลางอย่างว่าง่ายแล้วละ แต่จะไม่ง่ายอย่างนั้นในไอ้อี6

เรามาพิจารณาถึงคำสั่งนี้กัน :

โค๊ด: [Select]
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;

}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;

}

ผลที่เราอยากได้คือแบบนี้



แต่ไออี 6 จะให้คุณแบบนี้



วิธีแก้ปัญหา
เรา ต้องอาศัยคำสั่ง text-align เข้าช่วย โดยใส่คำสั่ง text-align; center สำหรับตัวหลัก และใส่คำสั่ง text-align: left สำหรับตัวใน ก็จะได้คำสั่งแบบนี้

โค๊ด: [Select]
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;

}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px 0;
text-align: left;

}

2. Staircase Effect

เรียก หัวข้อนี้ว่า ‘ผลกระทบขั้นบันได’ (เสี่ยวดีมั้ย)
หลายๆเว็บต้องมีเมนู ไม่ว่าจะเมนูซ้าย เมนูขวา หรือเมนูบน ในทีนี้เราหมายถึงเมนูบน (ภาษา css เรียกว่า navigation ซึ่งแปลว่า การเดินเรือ(หมายถึงเรือที่นำทาง เมนูก็เปรียบเป็นตัวนำทางตัวหนึ่งเช่นกัน)) โดยปกติเราจะใช้คำสั่ง ul li ในการสร้าง

โค๊ด: [Select]
<ul>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>

ul {
list-style: none;
}

ul li a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;

}

บราวเซอร์มาตรฐานทั่วไป ก็เป็นอย่างนี้



แต่ไอ้อีหก จะเป็นอย่างงี้



วิธีแก้ปัญหา มี 2 วิธีครับ
1.  สั่ง li ให้ชิดซ้ายซะ

โค๊ด: [Select]
ul li {
float: left;
}

2. เพิ่มคำสั่ง display: inline

โค๊ด: [Select]
ul li {
display:inline;
}

3. Double Margin on Floated Elements

ปัญหาของก็ตามหัวข้อนั่นเลย double margin ใส่ไป 2 แต่มันให้มา 4   (มันในทีนี้หมายถึง ไอ้อีหก)  พูดแล้วไม่เห็นภาพ มาดูตย.กันเลยดีกว่า

โค๊ด: [Select]
#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
}

ชาวบ้านเขาเป็นแบบนี้



แต่ไอ้อีกหก..!!



ปัญหานี้แก้ได้ง่ายๆด้วยคาถามสั้นๆว่า display: inline

โค๊ด: [Select]
#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
display: inline;
}

ลิงค์หัวข้อ: http://dexmore.com/topic/808
Windows XP    Firefox 3.6   see ip บันทึกการเข้า
ดูรายการสิ่งของเปลี่ยนชื่อของคุณให้ดูเท่ห์ ๆ!  เพิ่มจำนวนกระทู้อีก 100!  บัตรผ่านห้องเกมส์ใช้ได้ 30 วัน  น้องหมี..เอาไว้กอดนอนแทนกิ๊ก  สำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  เปลี่ยนไตเติลของตัวเอง  ของเล่นสัตว์เลี้ยงตอนที่มันเหงา!  อาหารสัตว์เลี้ยง!  เอาไว้ขโมย Money ของคนอื่น!  เพิ่มพลังวัตต์ให้กับตัวเองสัก 10 แต้ม  
โฮสต์ดีๆ บริการด้วยใจ
SMF ModifyNusZz-*
*
***



Thailand   ชาย ผู้เริ่มต้นกระทู้นี้ ออฟไลน์ เว็บไซต์
icon message
general ความคิดเห็นที่ 1 เมื่อ: 28 กุมภาพันธ์ 2553, 19:37:06
4. Inability to Have Elements with Small Heights

ability แปลว่า สามารถ แต่หากมี in นำหน้า ก็จะไร้ความสามารถทันที ในข้อนี้ ความหมายคือ “ความไร้ความสามารถในการจัดการความสูงในระดับเล็ก” โดยปกติถ้าเราต้องการความสูงของบ็อก เราก็แค่ใส่คำสั่ง height:xx px; อยากสูงแค่ไหนก็ใส่ค่าเข้าไป แต่ในไอ้อีหกนั้น ถ้าใส่ค่าความสูงต่ำมาก มันจะไม่ต่ำให้

โค๊ด: [Select]
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
}

ควรจะเป็นแบบนี้



แต่ไอ้อีหก..



วิธีแก้ปัญหาสามารถทำได้ 2 วิธี แล้วแต่ถนัดนะครับ
วิธีแรกคือ เพิ่มขนาดฟ้อนท์เข้าไป แล้วใส่ค่า 0

โค๊ด: [Select]
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
font-size: 0;
}

วิธีที่สอง เพิ่มคำสั่ง overflow: hidden
โค๊ด: [Select]
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden;
}

5. Auto Overflow and Relatively Positioned Items

ปัญหานี้เกิดขึ้น เมื่อเราใช้คำสั่ง Overflow: auto และคำสั่ง Position:relative;
คงเคยเขียน css ให้ box ซ้อน box คือมี box ใน และ box นอก ปัญหาจะเกิดขึ้น เมื่อ boxในมีความสูงกว่า boxนอก แทนที่boxนอกจะเกิด scroll มันกลับแทงทะลุ box นอกออกมาซะงั้น ถ้ายังงง ดูภาพโค๊ดกันเลยดีฟ่า เอ้ย กว่า

โค๊ด: [Select]
<div id=”element“><div id=”anotherelement“></div></div>

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
}

#anotherelement{
background: #555;
width: 150px;
height: 175px;
position: relative;
margin: 30px;
}

ผลลัทธ์ที่ควรจะเป็น



แต่ไอ้อีหกกลับเป็นแบบนี้?



วิธีแก้ปัญหา ง่ายมากครับ(ฝรั่งเขาว่าอย่างนั้น) เพิ่ม relative position ให้กับ parent หรือ boxแม่ หรือที่ผมเรียกว่า box นอกนั่นแหละครับ

โค๊ด: [Select]
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
}



ลิงค์หัวข้อ: http://dexmore.com/topic/808
Windows XP    Firefox 3.6   see ip บันทึกการเข้า
ดูรายการสิ่งของเปลี่ยนชื่อของคุณให้ดูเท่ห์ ๆ!  เพิ่มจำนวนกระทู้อีก 100!  บัตรผ่านห้องเกมส์ใช้ได้ 30 วัน  น้องหมี..เอาไว้กอดนอนแทนกิ๊ก  สำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  เปลี่ยนไตเติลของตัวเอง  ของเล่นสัตว์เลี้ยงตอนที่มันเหงา!  อาหารสัตว์เลี้ยง!  เอาไว้ขโมย Money ของคนอื่น!  เพิ่มพลังวัตต์ให้กับตัวเองสัก 10 แต้ม  
โฮสต์ดีๆ บริการด้วยใจ
SMF ModifyNusZz-*
*
***



Thailand   ชาย ผู้เริ่มต้นกระทู้นี้ ออฟไลน์ เว็บไซต์
icon message
general ความคิดเห็นที่ 2 เมื่อ: 28 กุมภาพันธ์ 2553, 19:41:11
6. Floated Layout Misbehaving

ปัญหานี้เกิดขึ้นเมื่อเราต้องการวาง box เรียงกันมากกว่า 1 คือตั้งแต่ 2 ขึ้นไป ความต้องการคือ ให้มันวางเรียงกันในแนวขวางจากซ้ายไปขวา box แต่ละตัวก็จะถูก fix ความกว้างไว้ เมื่อมีข้อความใน box ยาวเกิดกว่า box box ก็จะไม่ขยายตาม คงสภาพความกว้างไว้ตามค่าที่ fixไว้  แต่ในไออีหก เหมือนว่าจะไม่ยอมรับกติกาข้อนี้ ดูโค๊ดกันดีกว่า คิดว่าคงเคยเจอปัญหานี้

โค๊ด: [Select]
<div id=”container“>

<div id=”element“>http://net.tutsplus.com/</div>

<div id=”anotherelement“></div>

</div>

#element, #anotherelement{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;  /*ส่งให้ box ทั้งสองลอยอยู่ในฝั่งซ้ายเรียงกันไป*/
}

#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}

ควรจะเป็นอย่างนี้



แต่ไอ้อีหกกลับเป็นหยั่งงี้..



วิธีแก้ก็แค่เพิ่มคำสั่ง overflow : hidden ไปใน boxใน

โค๊ด: [Select]
#element{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
}

7. Space Between List Items

ปัญหานี้ไม่ใช่ ปัญหาช่องว่างระหว่างวัย แต่เป็นปัญหาช่อง ว่างระหว่างลิสต์

โค๊ด: [Select]
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>

ul {
margin:0;
padding:0;
list-style:none;
}

li a {
background: #95CFEF;
display: block;
}

จากโค๊ดด้านบนผลลัพธ์ควรเป็นแบบนี้



แต่ไอ้อี..6



มีแนวทางแก้ไขอยู่ 3 ทางครับ

1. แก้ปัญหาโดย fix ความกว้าง วิธีนี้อาจไม่ค่อยดีนัก เพราะถึงแก้ปัญหาข้างต้นได้ แต่อาจเจอปัญหาใหม่ คือ บางครั้งลิสต์เมนู อาจมีความกว้างกว่าค่าที่fix ไว้
โค๊ด: [Select]
li a {
background: #95CFEF;
display: block;
width: 200px;
}

หรืออีกวิธีคือไม่ fix ความกว้าง  ใช้วิธี float ไว้

โค๊ด: [Select]
li a {
background: #95CFEF;
float: left;
clear: left;
}

วิธีสุดท้าย เพิ่มคำสั่งไปอีก 1 ชุดสั้นๆ

โค๊ด: [Select]
li {
display: inline;
}

ปล. ขออนุญาตตัดบางส่วนออกนะครับ ...

และหวังว่าการผมช่วยนำบทความตัวนี้มาเผยแพร่ หวังว่าจะเป็นประโยชน์ต่อสาธารณะชนด้วยครับผม

ลิงค์หัวข้อ: http://dexmore.com/topic/808
Windows XP    Firefox 3.6   see ip บันทึกการเข้า
ดูรายการสิ่งของเปลี่ยนชื่อของคุณให้ดูเท่ห์ ๆ!  เพิ่มจำนวนกระทู้อีก 100!  บัตรผ่านห้องเกมส์ใช้ได้ 30 วัน  น้องหมี..เอาไว้กอดนอนแทนกิ๊ก  สำหรับบอกรักใครสักคน ก็ส่งไปให้เขาเลย!  เปลี่ยนไตเติลของตัวเอง  ของเล่นสัตว์เลี้ยงตอนที่มันเหงา!  อาหารสัตว์เลี้ยง!  เอาไว้ขโมย Money ของคนอื่น!  เพิ่มพลังวัตต์ให้กับตัวเองสัก 10 แต้ม  
โฮสต์ดีๆ บริการด้วยใจ
ส่งหัวข้อนี้พิมพ์ หน้า: 1 
-:-DexMoreGroup แหล่งมั่วสุมทางปัญญา-:- linktree Web Achieve linktree Web Basis linktree Cascading Style Sheet

CSS IE Bugs แมลงร้ายในไออี 6 .... [ปัญหาและแนวทางการแก้ไข]

กระโดดไป:  

Creative Commons License

SMF Thai Translation Powered by SMF © 2006–2012, Simple Machines LLC

WordPress Google เข้าเยี่ยมชมหน้านี้ล่าสุดเมื่อ : 22 พฤษภาคม 2555, 02:07:31

jQuery Plugin Copyright © 2551-2555 Themes Design & Hosting by DexMoreGroup

Sitemap | Thai Simple Machines Forum support SMF Thai

Web Begining | SMF Modifications | SMF Thai Translation Web Begining

Drupal | WordPress | CMS Joomla | jQuery Plugin | Web Graphics CMS Joomla