วิธีแก้ไข CSS เมื่อไม่ทำงานใน Google Chrome

CSS ไม่ทำงานใน Chrome หรือไม่ บทความนี้ประกอบด้วยข้อมูลที่เกี่ยวข้องและแนวทางแก้ไขปัญหานี้

รูปแบบเต็มรูปแบบของ CSS คือ Cascading Style Sheets หากไม่มีคุณจะเห็นเว็บไซต์ที่น่าเกลียดทั่วอินเทอร์เน็ต ตามค่าเริ่มต้น ทุกเบราว์เซอร์รองรับ CSS ได้ค่อนข้างดี เนื่องจากเป็นตัวเลือกที่เป็นสากล

แม้ว่า Chrome จะเป็นหนึ่งใน เว็บเบราว์เซอร์ที่ดีที่สุดในบางครั้ง คุณอาจเห็นว่า CSS ไม่ทำงานบนเบราว์เซอร์นี้ทั้งหมดหรือทำงานไม่ถูกต้อง ปัญหานี้อาจเกิดขึ้นซ้ำซากและทำลายวันของคุณ

ปัญหาที่เกี่ยวข้องกับ CSS บน Chrome ล้วนเป็นประสบการณ์ที่น่าผิดหวังสำหรับทั้งผู้ใช้ทั่วไปและนักออกแบบเว็บไซต์

ทำไม CSS ของฉันไม่ทำงานใน Chrome

อาจมีสาเหตุหลายประการที่ทำให้คุณประสบปัญหา CSS ใน Google Chrome หรือเว็บเบราว์เซอร์อื่นๆ ที่ใช้ Chromium หลังจากทำการวิจัย เราพบสาเหตุทั่วไปบางประการ นี่คือพวกเขา:

• นักออกแบบเว็บไซต์ใช้การเข้ารหัสที่แตกต่างกันสำหรับ HTML และ CSS
• แคชและคุกกี้เสียหาย
• ปัญหาการเชื่อมต่ออินเทอร์เน็ต
• เซิร์ฟเวอร์ CDN ที่โฮสต์ CSS อาจหยุดทำงานหรือเกิดข้อผิดพลาด
• ส่วนขยายบุคคลที่สาม
• เบราว์เซอร์ Chrome เวอร์ชันที่ล้าสมัย

อาจมีเหตุผลอื่น แต่ในสถานการณ์ส่วนใหญ่ สิ่งเหล่านี้คือสิ่งที่คุณจะเห็น

ฉันจะรู้ได้อย่างไรว่าเปิดใช้งาน CSS แล้ว

1. เยี่ยมชมเว็บไซต์สุ่มใด ๆ
2. หากคุณเห็นการออกแบบที่เสียหาย แสดงว่า Chrome ไม่ได้โหลด CSS
3. หากคุณเห็นว่าทุกอย่างลงตัว แสดงว่า Chrome กำลังโหลด CSS และเปิดใช้งานโดยไม่มีปัญหาใดๆ

ใน Google Chrome หรือเบราว์เซอร์สมัยใหม่ใดๆ CSS จะเปิดใช้งานตามค่าเริ่มต้น คุณไม่สามารถปิดการใช้งานหรือเปิดใช้งานคุณสมบัตินี้ด้วยตัวเองตามปกติ

อย่างไรก็ตาม ส่วนขยายของบุคคลที่สามบางรายการอาจปิดใช้งาน CSS ต่างกัน ในกรณีนั้น คุณสามารถเปิดหรือปิดใช้งานคุณลักษณะนี้ตามคำแนะนำอย่างเป็นทางการของส่วนขยาย

เคล็ดลับด่วน:

การจัดการกับปัญหา CSS ในเบราว์เซอร์ปัจจุบันของคุณอาจเป็นเรื่องที่น่ารำคาญมาก คุณจะไม่พิจารณาการเปลี่ยนแปลงนี้อีกหรือ

ตัวอย่างเช่น โอเปร่า นำเสนอการนำทางที่ได้รับการปรับปรุงสำหรับเว็บไซต์ UI ขั้นสูง คุณสมบัติการผสานรวมกับแอพยอดนิยม และแม้แต่เทคโนโลยีการท่องเว็บ Web3

โอเปร่า

ไม่ต้องกังวลกับ CSS ที่เสียหายและเรียกดูได้อย่างราบรื่นในขณะนี้!

ฟรี เข้าไปดูในเว็บไซต์

ฉันควรทำอย่างไรหาก CSS ไม่ทำงานใน Chrome

1. อัปเดต Chrome

1. เปิด Google Chrome
2. คลิกที่ สามจุดแนวตั้ง และ การตั้งค่า.
3. ไปที่ เกี่ยวกับ Chrome.
4. Google จะตรวจสอบการอัปเดตและติดตั้งหากมีการอัปเดต
5. เปิด Chrome อีกครั้ง

2. ล้างแคชและคุกกี้

1. เปิด Google Chrome
2. กด CTRL + กะ + เดล บนแป้นพิมพ์ของคุณ
3. ชุด ตลอดเวลา เป็นช่วงเวลา
4. ตรวจสอบ แคชรูปภาพและไฟล์ แล้วคลิกที่ ข้อมูลชัดเจน.

3. ปิดการใช้งานส่วนขยายที่มีปัญหา

1. พิมพ์ที่อยู่ต่อไปนี้ในแถบที่อยู่ของ Chrome แล้วกด เข้า. chrome://ส่วนขยาย/
2. สลับการปิดถัดจากส่วนขยายที่คุณต้องการปิดใช้งาน

4. ตรวจสอบว่าเว็บเซิร์ฟเวอร์มีปัญหาหรือไม่ (สำหรับนักออกแบบ/นักพัฒนา)

หากเว็บเซิร์ฟเวอร์ประสบปัญหาในการให้บริการเนื้อหาที่จำเป็น เช่น CSS และ JS เว็บไซต์อาจโหลดไม่ถูกต้องบนเบราว์เซอร์ใดๆ ในกรณีนี้ หากคุณเป็นผู้ดูแลเว็บ ให้ไปที่เว็บไซต์ของผู้ให้บริการเว็บเซิร์ฟเวอร์ของคุณและดูว่าบริการนั้นใช้งานได้และตกลงหรือไม่

นอกจากนี้ หาก CSS ของคุณโฮสต์อยู่บนเซิร์ฟเวอร์ CDN URL สำหรับสไตล์ชีตอาจเป็นดังนี้: cdn.example.com/style.css

คุณควรตรวจสอบ URL นั้นและดูว่าสามารถเข้าถึงได้จากคอมพิวเตอร์ของคุณหรือไม่

ถ้าไม่เช่นนั้น แสดงว่าเซิร์ฟเวอร์ CDN อาจมีปัญหาบางอย่าง ทำตามขั้นตอนเพื่อแก้ไขปัญหาเหล่านี้เพื่อแก้ไขปัญหา CSS ที่ไม่ทำงาน

5. การเข้ารหัสและรูปแบบ CSS ที่ถูกต้อง (สำหรับนักออกแบบ)

Google Chrome ต่างจาก IE, Edge รุ่นเก่า หรือเบราว์เซอร์อื่นๆ ที่ไม่ใช่ Chromium

คุณอาจเห็นว่า @media CSS หรือยัติภังค์ CSS หรือเส้นตาราง CSS ไม่ทำงานใน Chrome แม้ในบางกรณี สี CSS อาจไม่แสดงตามที่คาดไว้

ไม่ว่าจะมาจาก CMS เช่น WordPress หรือเว็บไซต์ที่สร้างขึ้นเอง Chrome จะไม่โหลด CSS อย่างเหมาะสมด้วยเหตุผล

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

หาก Visual Studio Code เป็นตัวแก้ไขของคุณ คุณสามารถทำได้โดยทำตามขั้นตอนเหล่านี้:

1. เปิดไฟล์ CSS และ HTML ในตัวแก้ไข
2. คลิกที่ชื่อรูปแบบการเข้ารหัสเช่น UTF-8 ที่ด้านล่างขวาและเลือกรูปแบบที่ถูกต้อง

หลังจากเปลี่ยนแล้ว อย่าลืมบันทึกไฟล์ CSS และ HTML หากคุณใช้ตัวแก้ไขอื่น คุณอาจต้องทำอย่างอื่น

6. ปิดใช้การลดขนาด CSS และการโหลดแบบ Lazy Loading (สำหรับนักพัฒนา)

หากคุณเห็นว่า WordPress โหลด CSS ใน Chrome ไม่ถูกต้อง อาจเป็นเพราะการลดขนาดและการรวม CSS ลองปิดการใช้งานจากปลั๊กอินแคชของคุณ ปิดใช้งานการโหลดแบบ Lazy และดูว่าจะช่วยได้หรือไม่

7. ลองเครือข่ายอื่น

หากการเชื่อมต่ออินเทอร์เน็ตของคุณไม่สามารถโหลดทรัพยากรทั้งหมดบนเว็บไซต์ CSS อาจไม่ทำงานใน Chrome หรือเบราว์เซอร์อื่น ดังนั้น คุณสามารถลองใช้ VPN หรือเครือข่ายอื่นเพื่อตรวจสอบว่าทุกอย่างเรียบร้อยหรือไม่

เราแนะนำ อินเทอร์เน็ตส่วนตัว (PIA) เนื่องจากเป็น VPN ที่เสถียรที่สุดเนื่องจากมีเครือข่ายทั่วโลกที่ใหญ่ที่สุด

จะทำอย่างไรถ้า CSS ไม่ทำงานใน Chrome แต่ทำงานในเบราว์เซอร์อื่น

ปัญหานี้เป็นเรื่องธรรมดามาก คุณอาจเห็นว่า CSS ไม่ทำงานบน Google Chrome แต่ใช้งานได้บน IE, Firefox, Edge หรือเบราว์เซอร์อื่นๆ

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

บทความนี้แสดงวิธีที่มีประสิทธิภาพที่สุดในการแก้ไข CSS ที่ไม่ทำงานบน Chrome และปัญหาที่คล้ายคลึงกัน หากคุณรู้วิธีอื่น ๆ เขียนในช่องแสดงความคิดเห็น