Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > อยากทราบวิธีแก้ปํญหา css แสดงผล ไม่ตรงกันครับ ส่วนใหญ่จะแก้ปัญหากันอย่างไรครับ

อยากทราบวิธีแก้ปํญหา css แสดงผล ไม่ตรงกันครับ ส่วนใหญ่จะแก้ปัญหากันอย่างไรครับ

เริ่มหัวข้อใหม่

Likito

โพสกระทู้ ( 335 )
บทความ ( 0 )

ส่วนใหญ่จะแก้ปัญหากันอย่างไรครับ ตอนนี้ เซ็งมาก
เครื่องที่ใช้พัฒนา แสดงผลได้ปกติ ตามที่ พัฒนามา
แต่ เครื่อง ผู้ใช้ แสดงผล ไม่ปกติ
เนื่องจาก ตัว บราวเซอร์ ver. ต่างกัน เช่น IE7 IE8 หรือ firefox เป็นต้น

เครื่องผม ใช้ IE8 กับ firefox 3.6 แสดงผล ได้เหมือนกัน ไม่มีปัญหา
แต่เครื่องอื่นที่นอกจากนี้ มักจะมีปัญหาครับ

ปัญหาที่เจอหลักๆ 2อย่างตอนนี้คือ
การจัดวาง หน้า page
ผมจัดวางแบบนี้คือ จัดวาง page

มีส่วน head บริเวณสีฟ้า
เมนูทาง ซ้ายมือ สีน้ำเงิน
เนื้อหาตรงกลาง สีครีม
เนื้อหา ทางขวา สีแดง
ส่วน foot สีเขียว

ผมใช้ code ประมาณนี้
<div id="container">
<div id="header">

</div>
<div id="sidebar-left">

</div>
<div id="sidebar-right">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</div>

#container{
width:955px;
margin:0 auto;
}
#header{
margin:0 0 0.2% 0;
height:150px;
}
#sidebar-left{
float:left;
width:190px;
padding:0px;
margin:0 0 0.2% 0;
}
#sidebar-right{
float:right;
width:190px;
padding:0;
margin:0 0 0.2% 0;
}
#content{
margin:0 20.5% 0.2% 20.3%;
width:565px;
}
#footer{
clear:both;
height:70px;
}

ตรงที่ทำสีไว้ ถ้ามี เครื่องผม จะแสดงผล ได้ปกติ ตามที่ตรงการดังรูปข้างบน
****แต่เครื่องอื่น เนื้อหาตรงกลาง จะ ร่วงลงมาอยู่ข้างล่าง ไม่ได้อยู่ระหว่าง พื้นที่ซ้าย กับขวา
แต่ถ้าเกิด ผมตัด โค้ดส่วนที่ทำสีไว้ดังกล่าวออก เครื่องอื่น จะแสดงผลได้ ปกติ ตามที่ต้องการ
แต่ เครื่องผม พื้นที่สีครีม จะ ไปชิด ฝั่งซ้าย ทับ กับ พื้นที่ฝั่งซ้าย

Tag : - - - -

Date : 2010-04-08 16:17:20

By : kalawa

View : 2758

Reply : 10

No. 1

Likito

โพสกระทู้ ( 335 )
บทความ ( 0 )

ปัญหาที่2 ที่พบครับ

<div id="a">
<div id="b">
xxxxxxxxxxxx
</div>
</div>

#a{
margin:0 0 0 0;
}
#b{
margin-top:40px;
}

ปัญหา css

id=a เป็นพื้นที่สีเขียวครับ
id=b เป็นพื้นที่สีเหลือง

ที่เครื่องผมถ้าใช้ css ดังกล่าว จะ แสดงผล ดังรูปทางขวามือ
แต่เครื่องอื่นๆ จะแสดงผล ตามรูปทางซ้ายมือครับ

สิ่งที่ต้องการ คือให้แสดงผลตามรูปทาง ซ้ายมือครับ

Date : 2010-04-08 16:35:29

By : kalawa

No. 2

Kenessar

โพสกระทู้ ( 321 )
บทความ ( 5 )

IE มักจะมีปัญหาในเรื่องของ CSS น่ะครับ โดยเฉพาะ IE 6 เครื่องอื่นที่คุณพูดถึงอาจจะใช้ IE6 ก็เป็นได้ เพราะ IE7 เป็นต้นมา ปัญหาก็น้อยลง (แต่ไม่ได้หมายความว่าจะไม่มีเลย) ถ้าคุณจะมีเบราเซอร์ไว้ทดสอบผมแนะนำให้มี Firefox กับ IE6

ถ้าทดสอบใน Firefox แล้วได้ผลอย่างไร IE8 ก็จะไม่แตกต่างกันมากเกินไป อย่างน้อย ก็ไม่แตกต่างเหมือน IE6 ล่ะครับ

ทำการทดสอบหน้าตาบน Firefox ก่อน แล้วก็มาลองใน IE6 ส่วนไหนที่เสียก็นำมันมาเขียนทับไว้อีกไฟล์ สมมุติว่าผมเก็บลงในไฟล์ style.ie6.css นะครับ แล้วใน Markup ก็เพิ่ม css condition ลงไป

Code (PHP)

<!--[if IE 6]>
<link rel="stylesheet" href="style.ie6.css">
<![endif]-->

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

Code (PHP)

<link rel="stylesheet" href="style.css">
<!--[if IE 6]>
<link rel="stylesheet" href="style.ie6.main.css">
<link rel="stylesheet" href="style.ie6.form.css">
<link rel="stylesheet" href="style.ie6.board.css">
<![endif]-->

Date : 2010-04-08 17:16:12

By : kenessar

No. 3

Rod

โพสกระทู้ ( 212 )
บทความ ( 0 )

ผมใช้เเบบ คุณ Kenessar เช่นกันครับ ลองดู

Date : 2010-04-08 17:19:34

By : designbyrod

No. 4

เอี่ยว

โพสกระทู้ ( 3,468 )
บทความ ( 0 )

Quote:
<div id="a">
<div id="b">
xxxxxxxxxxxx
</div>
</div>

#a{
margin:0 0 0 0;
}
#b{
margin-top:40px;
}

คับเปลี่ยนเป็น

#a {
padding-top: 40px;
}

Date : 2010-04-08 18:10:42

By : pjgunner

No. 5

Likito

โพสกระทู้ ( 335 )
บทความ ( 0 )

ขอบคุณสำหรับ คำแนะนำและวิธีการแก้ปัญหา ครับ

แล้วอย่างตอนนี้เครื่อง ลง IE8 ไปแล้ว มีวิธี จะใช้ IE6 ควบคู่ไหมครับ
คือ หลักๆชอบ ใช้ IE8 เป็นหลักในการเล่นเว็บ
จึงทำให้ตอนทำงานนั้น ใช้ IE8 แสดงผลเป็นส่วนใหญ่ด้วย
มีลองเทส บน Firefox บ้าง (ver.3.6) เลยไม่เจอปัญหาอะไรเท่าไร เพราะส่วนใหญ่จะแสดงผลไม่ต่างกับ IE8 มากนัก

Date : 2010-04-08 18:32:06

By : kalawa

No. 6

Kenessar

โพสกระทู้ ( 321 )
บทความ ( 5 )

มีโปรแกรมที่สามารถรัน IE ได้หลายเวอร์ชั่นครับ

http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

ลองเอาเล่นดูครับ

Date : 2010-04-08 18:35:48

By : kenessar

No. 7

Guest

ลองทำดูด้วยคนครับ

http://demo.chiangmaicam-tel.com/block/

ตัวนี้ทดสอบกับ IE8, Firefox 3, Opera, Apple Safari ทั้งหมดแสดงผลเหมือนกัน แต่ไม่ได้ทดสอบกับ IE6 ไม่มีครับ พอดีว่าเลิกสนในมันแล้ว หลังจากมีการรณรงค์ให้เลิกใช้ IE6 (ลูกค้าคนไหนใช้ IE6 อย่างเดียวผมไม่สนเลย ถ้าโบราณขนาดนั้นผมก็ไม่เอาล่ะครับ เสียเวลา สงสัยจะคุยกันไม่รู้เรื่องแน่ๆ)

ถ้าที่ให้ไปมัน work ก็เอาโค้ดไปใช้ได้เลยครับ View Source ดูเลยครับ

...แต่ถ้าไม่ work ก็ ..ตัวใครตัวมัน

Date : 2010-04-08 22:31:51

By : dekcom

No. 8

LindyFralin

โพสกระทู้ ( 114 )
บทความ ( 0 )

http://www.my-debugbar.com/wiki/IETester/HomePage

มีทุก version เลยครับ

Date : 2010-04-09 01:39:17

By : LindyFralin

No. 9

Likito

โพสกระทู้ ( 335 )
บทความ ( 0 )

ใจจริง ก็อยากจะ ไม่สนใจ พวกที่ใช้ IE6 หรอกครับ
แต่เนื่องจากทำ ระบบในหน่วยงาน มันจะเลี่ยง ก็เลี่ยงไม่ได้ T___T
ผู้ใช้หลักๆ ก็คนในหน่วยงาน จะไปบังคับให้เค้าเปลี่ยน บราวเซอร์ ก็ไม่ได้
เลยต้องทำให้ มันซัพพอร์ทให้มากที่สุดจะดีกว่า T____T

Date : 2010-04-09 08:20:31

By : kalawa

No. 10

Guest

ต้องขอบคุณ คุณ LindyFralin ด้วยนะครับ ลองใช้ดูแล้ว

ที่ผ่านมาผมทำโดยไม่สนใจพวก IE6 เพิ่งจะได้ test ก็วันนี้แหละครับ ผลปรากฏว่า ปกติดีครับ เพราะเน้นที่การเขียนโค้ดให้ถูกต้องตามมาตรฐานไว้ก่อนครับ ทั้ง CSS และ XHTML รันได้ทุก browser ออกแบบเสร็จต้อง validate กับ W3C ดูครับ ไม่ต้องพยายามเน้นที่ IE6 ทำของเราให้มาตรฐานก่อน แล้วค่อยแก้ปัญหาอีกเล็กๆ น้อยๆ ที่เกิดขึ้นกับ IE6

หมายเหตุ : ตามลิงค์ไปดูครับ ตอนนี้เป็นชนกลุ่มน้อยแล้วครับ
http://www.w3schools.com/browsers/browsers_stats.asp

Date : 2010-04-09 10:29:02

By : dekcom

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : อยากทราบวิธีแก้ปํญหา css แสดงผล ไม่ตรงกันครับ ส่วนใหญ่จะแก้ปัญหากันอย่างไรครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก