A-AA+then

Css ที่ทำงานเพี้ยน ใน GoogleCrome

3,119
พอดี ผมได้เขียน Web ที่เป็นการ Slide Show Menu โดย ใช้ Jquery ในการทำงาน
โดยถ้านำไป Run ผ่าน Ie หรือ Firefox แล้วมันสามารถทำงานได้
แต่ พอนำไป Run ผ่าน Safari หรือ GoolgeCrome นั้นมันทำให่มีการทำงานที่เพี้ยน ไม่สามารถทำงานได้
เช่น Css มันจะผิดตำแหน่งไปเลย พอมีวิธีที่จะแก้ไขได้หรือเปล่าครับ
ขอบคุณครับ

20 ความคิดเห็น

http://jqueryfordesigners.com/demo/coda-slider.html

ตัวอย่าง โค้ดที่ใช้ทำงาน ครับ

1

ผมทดสอบก็ปกตินี่
2

http://icecube.co.th
นี้คือตัวที่มีปัญหาครับ
3

ไม่แน่ใจว่าเกี่ยวกับเรื่อง html โค้ดหรือเปล่าครับ

ผมเคยเจอว่าที่แสดงใน chrome กับ firefox เพื่อนมันอาจเกิดจากใส่โค้ดไม่ถูกหลัก
เช่น <table> ผมต้องใส่พวก <table cellspacing="0" cellpadding="0" width=".."> ประมาณนี้ครับ
แล้วมันถึงจะแสดงผลใกลัเคียงกัน

ตอนนี้ผมก็ใช้ slidemenu ที่ท่านเคยแนะนำมาเหมือนกันครับลองดูที่ www.narongrit.net

ลองเช็คดูครับ

4

555+++

ผิดที่ CSS ของเว็บเองแหละครับ

ผมแนะนำว่า ให้ลองใช้ CSS ตามที่เว็บกำหนดก่อน แล้วค่อยมาเพิ่มเติม ส่วนแตกต่างที่ต้องแก้ไขทีหลังครับ และให้ระมัดระวังเรื่อง CSS Inline ครับ ซึ่งจะเป็นตัวปัญหาเลย
5

ดูเหมือนจะไม่ธรรมดา 555++

สู้ๆ
6

ค้าบๆๆ
ผมพอมีทางแก้เเล้ว
แต่ขอถามเพิ่มหน่อยนะครับ
ถ้าผมต้องการตรวจสอบ  ว่า เบาว์เซอร์ที่ใช้เป็น IE หรือ FireFox หรือ GoogleCrome
ใช้ Javascript ตรวจสอบได้อ่ะเปล่าครับ แล้วใช้คำสั่ง อะไร ช่วยหน่อยนะครับ ^^

ขอบคุณครับ
7

มีครับ ลองหาบนเว็บดูครับ

ดูเหมือน JQuery จะมีคำสั่งตรวจสอบ Browser เหมือนกัน แต่ผมจำคำสั่งไม่ได้ ลองค้นหาดูนะครับ
8

ได้วิธี ตรวจสอบแล้ว ครับ อาจจะง่ายๆๆไปหน่อยนะครับ แต่เอามาฝากไว้เพื่อ คนที่ไม่รู้ครับ ^^

var navi = navigator.userAgent

if ( navi.match("MSIE"))
{
    document.write("IE");
}
else if(navi.match("Chrome"))
{
    document.write("Chorm");
}

มีคำถามอีกหน่อยครับ
ถ้าต้องการ Create  <link rel="stylesheet" type="text/css" href="coda-slider.css"> โดยใช้ javascript อ่ะครับ ทำไงหรอ
ผมไม่แน่ใจ อ่ะครับ แล้วมันต้องกำหนด ID ด้วยหรือเปล่า ผมกลัวว่ามันจะไปซ้ำกับอันอื่นๆ ที่มีอยู่แล้วหรือถ้าใครมีวิธีแนะนำบอกได้นะครับ
แนวความคิดของผม คือ จะ ตรวจสอบก่อนว่า Browser ที่ใช้ คืออะไร แล้วก็จะ ให้ Javascript นั้น เรียก Css ที่ผมเตรียมไว้เข้ามาทำงาน
โดยผมจะเตรียม Css สำหรับ IE และ FireFox แยกกันเอาไว้ อ่ะครับ
ช่วยหน่อยนะครับ ^^
ขอบคุณครับ
9

เป็นไปได้มั้ย สร้าง CSS ขึ้นมา 2 ไฟล์ โดยใช้  javascript ที่ให้มาเป็นตัวบอกว่าเป็น browser อะไร แล้วใช้ if else เป็นตัวเลือกว่าจะใช้ css ตัวไหน เช่น

if (IE) { echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">"; } else 
{ echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-chrome.css\">"; }

ประมาณนี้อ่ะครับ
10

ว่าแต่ ตัวนี้มันต่างจากกระทู้นี้ยังไงบ้างครับ นอกจากรูปกรอบแล้ว

http://www.goragod.com/forum-view.html?wbid=299

เห็นมี 2 คนละใช้และเจอปัญหาแบบเดียวกัน
11

เหมือนกัน ครับ เพื่อน กัน ^^
ขอบคุณมากๆๆครับ
แต่ที่ตอบมา ผมเขียน Javascript อ่ะครับ แล้วเอา PHP ไปแทรก ตรงตำแหน่งนั้นเลยหรอครับไม่ค่อยเข้าใจ อ่ะครับ
<title>Untitled Document</title>
<script>
var navi = navigator.userAgent

if ( navi.match("MSIE"))
{
    /*var css_link = document.createElement("link");
    css_link.rel="stylesheet";
    css_link.type="text/css";
    css_link.href="coda-slider.css";*/


    <? echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">";  ?>
}
else if(navi.match("Chrome"))
{
    <? echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">";  ?>
}

</script>

</head>
ผมลองแล้วมัน บอก ว่า ตรงที่เพิ่ม Eror อ่ะครับ ช่วยอีกหน่อยนะครับ ขอบคุณครับ
12

แหะๆ ผมแค่เสนอไอเดียนะครับ แต่ว่าอาจจะต้องหาทางปรับอีกหน่อยผมคิดว่าโค้ด php ไม่น่าจะแทรกเข้าไปใน javascript ได้นะครับ
ไอเดียผมเพิ่มเติมคือว่า

โค้ด java อันนี้
if ( navi.match("MSIE"))
{
    document.write("IE");
}
else if(navi.match("Chrome"))
{
    document.write("Chorm");
}

คงต้องหาทางส่งค่าให้ตัวแปรสำหรับใช้โค้ด php น่ะ เช่น ให้ตัวแปร $browser รับค่าแล้วใช้ if else เลือกใช้ css อีกที แต่จะต้องสร้างไฟล์ css 2 ไฟล์นี้ก่อนนะครับ คือ coda-slide-ie.css(สำหรับ browser IE) และ coda-slide-chrome.css (สำหรับ Chrome)
แล้วใช้ code PHP เป็นตัวเลือกว่าจะใช้ css ตัวไหน เช่น

if ($browser=='IE') {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-ie.css\">"; }
else if ($browser=='Chrome') {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-chrome.css\">"; }
else { 
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"coda-slider-firefox.css\">"; }

รอให้อาจารย์ลองมาแนะอีกดีกว่านะครับ ผมแค่เสนอไอเดีย แต่ไม่รู้จะทำได้จริงหรือเปล่า  
วิธีการผมอาจจะลูกทุ่งไปหน่อยนะครับ ขออภัยจริงๆ
13

http://www.goragod.com/knowledge-%E0%B8%95%E0%B8%A3%E0%B8%A7%E0%B8%88%E0%B8%AA%E0%B8%AD%E0%B8%9A%20%E0%B8%8A%E0%B8%99%E0%B8%B4%E0%B8%94%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%9A%E0%B8%A3%E0%B8%B2%E0%B8%A7%E0%B9%80%E0%B8%8B%E0%B8%AD%E0%B8%A3%E0%B9%8C.html

ตรวจสอบ Browser ด้วย PHP เสร็จแล้วก็ echo CSS ออกมาเลย

ลองหากันสักนิดครับบนเว็บมีบทความหลาย 100 เรื่อง อาจมีบางเรื่องที่ประยุกต์ใช้ได้ ลองใช้ search ค้นหาดูก็ได้ครับ
14

ขอบคุณอาจาร์ย และคุณฉุยมากๆครับ
สำหรับทุกๆๆคำแนะนำได้ความรู้และมีประโยชน์มากๆๆครับ

ขอบคุณมากๆ อีกครั้งครับ
15

    $(document).ready(function () {
        var $panels = $('#slider .scrollContainer > div');
        var w = $panels[0].offsetWidth;
        var $container = $('#slider .scrollContainer');
        var horizontal = true;
        if (horizontal) { 
            $panels.css({'float' : 'left','position' : 'relative'});
            $container.css('width', w * $panels.length);
        }

สรุปว่า้เป็นข้อผิดพลาดของ Javascript ครับ ให้แก้ไขโค้ดในส่วนนี้ที่หน้า index.php นะครับ หวังว่าจะหากันเจอ
16

Css ที่ทำงานเพี้ยน ใน GoogleCrome
ลองดูเทคนิคการหาข้อผิดพลาดด้วย debug ของ Browser นะครับ สังเกตุส่วน highlight และกรอบด้านซ้ายมือ สำหรับ firefox แสดงความกว้างของ scrollContainer ได้ 4270px
17

Css ที่ทำงานเพี้ยน ใน GoogleCrome
ส่วน Google Chrome แสดงค่านี้เป็น 0
18

ปัญหามันอยู่ที่ค่านี้กำหนดมาจากไหน ถ้าหาเจอก็กำหนดให้มันถูกซะก็พอ

แต่เนื่องจากโค้ดไม่ได้กำหนดค่านี้มาด้วย CSS แสดงว่าค่านี้จะถูกกำหนดขณะทำงาน และเนื่องจากเราเห็นค่านี้ในโค้ด ที่ได้จาก debugger ก็แสดงว่าค่านี้มาจาก 2 กรณี คือ
1.เขียนไว้ในโค้ด HTML โดยตรง
2.ถูกกำหนดโดย Javascript

จากการตรวจโค้ดไม่พบข้อที่ 1 แสดงว่ามาจากข้อที่ 2 คือกำหนดโดย Javascript

ถ้าจะพิจารณาถึงการทำงานของโค้ด (ร่วมกับสังเกตุจาก classname) แสดงว่า div นี้น่าจะเป็นส่วนห่อหุ้มสำหรับพื้นที่แสดงผลทั้งหมด ถ้าเคยออกแบบ effect พวกนี้ก็จะเดาได้ว่า div นี้จะแปรผันความกว้างตามเนื้อหาภายใน

bingo! สรุปได้แล้ว เราพอจะเดาได้แล้วว่าเป็นความผิดพลาดของ Javascript อันเกิดจากการคำนวณขนาดผิดพลาด ที่เหลือก็คือ หาว่าผิดตรงไหน

เรื่องนี้คงต้องศึกษา JQuery ว่ามันทำงานยังไง แล้วก็ลองไล่โค้ดดู สรุปที่ผิดก็ตามด้านบนแหละครับ Google Chrome อ่านขนาดของ scrollContainer ได้ 0
19

ได้ไม่ได้ไม่รู้ แต่ที่แน่ๆ เงียบกันไปเลย เฮ้อ
20
^