Gap ไม่ทำงานใน Safari: 3 วิธีในการแก้ไขอย่างง่ายดาย

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

คุณสมบัติ gap คือความพยายามที่จะจัดเตรียมคุณสมบัติที่คล้ายกับกริด CSS และ flexbox จะรับผิดชอบพื้นที่ (รางน้ำ) ระหว่างเสาและแถว

อย่างไรก็ตาม เบราว์เซอร์บางประเภท รวมถึง Safari ไม่เปิดใช้งานคุณสมบัติ gap เมื่อใช้เลย์เอาต์แบบยืดหยุ่น นี่ไม่ใช่ปัญหาเดียวของเบราว์เซอร์ และหลายคนรายงานว่า Safari ไม่สามารถดาวน์โหลดไฟล์ได้แต่เรากล่าวถึงปัญหานั้นในคู่มือแยกต่างหาก

ช่องว่างทำงานใน Safari หรือไม่

หากช่องว่างของคอลัมน์หรือช่องว่างกริดไม่ทำงานใน Safari เป็นไปได้สูงว่าคุณกำลังใช้ Safari เวอร์ชันที่น้อยกว่า 14

ตอนนี้ Row-gap และ column-gap ได้รับการสนับสนุนในคอนเทนเนอร์ Flexbox ใน Safari 14.1 การอัปเดตนี้ทำให้เป็นไปได้สำหรับ flexbox ที่จะใช้ในการออกแบบเว็บโดยไม่จำเป็นต้องแฮ็กขอบที่น่าอึดอัดใจ

แต่ถ้าคอลัมน์ช่องว่างไม่ทำงานใน Safari มีวิธีแก้ไข

รองรับ Flexbox Gap ในเบราว์เซอร์ทั้งหมดหรือไม่

เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับ flexbox เว็บเบราว์เซอร์หลายตัวมีการใช้งาน flexbox แบบทดลอง การใช้คำนำหน้าผู้ขายเป็นขั้นตอนมาตรฐานสำหรับการพัฒนาการใช้งานทดลอง

ปัญหานี้มีผลกับ Safari ก่อนเวอร์ชัน 15.4 เท่านั้น แต่ถ้าคุณใช้รุ่นนี้หรือรุ่นใหม่กว่า คุณจะไม่มีปัญหาใดๆ

เมื่อคุณทราบข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้แล้ว มาดูกันว่าเราจะทำอะไรได้บ้างหาก grid-gap ไม่ทำงานใน Safari

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

พูดง่ายๆ ก็คือ คุณสามารถแก้ไขปัญหาเว็บไซต์นี้ด้วยคอลัมน์ช่องว่างหรือแถวโดยเพียงแค่เปลี่ยนเบราว์เซอร์ของคุณเป็น Opera

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

โอเปร่า

นำทางโดยไม่มีข้อผิดพลาดบนหน้าเว็บใดๆ โดยใช้คุณลักษณะขั้นสูงและการช่วยสำหรับการเข้าถึง

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

ฉันจะแก้ไขช่องว่างได้อย่างไรถ้ามันไม่ทำงานบน Safari

1. อัปเดต Safari ของคุณเป็นเวอร์ชันล่าสุด

1. เลือก ค่ากำหนดของระบบ จาก แอปเปิล เมนูที่มุมของหน้าจอของคุณ
   
2. คลิกที่ อัพเดตซอฟต์แวร์.
   
3. รอให้ Mac ทำการตรวจสอบการอัปเดต
4. คลิก อัพเกรดเดี๋ยวนี้ หากมีการอัปเดตที่เข้าถึงได้
   
5. ตรวจสอบตัวเลือกที่มีข้อความ อัปเดต Mac ของฉันโดยอัตโนมัติ เพื่อรับการอัปเกรด macOS และ Safari โดยอัตโนมัติ
6. รอให้ติดตั้งการอัปเดตใด ๆ บน Mac ของคุณ

วิธีแก้ปัญหานี้ไม่ใช่วิธีแก้ปัญหาช่องว่างแบบยืดหยุ่นของ Safari และจะแก้ไขปัญหาบนคอมพิวเตอร์ของคุณอย่างถาวร

2. วิธีแก้ปัญหาช่องว่างแบบยืดหยุ่น

1. เปิดไฟล์ CSS ของคุณ
2. ตอนนี้เพิ่มองค์ประกอบที่ต้องการรหัสต่อไปนี้:
แสดง: กริด;
ตารางช่องว่าง: 8rem;
ช่องว่าง: 8rem;
   
3. บันทึกการเปลี่ยนแปลง.

หาก CSS flex gap ไม่ทำงาน คุณสามารถแก้ไขปัญหานี้ได้โดยใช้วิธีแก้ปัญหาชั่วคราว ไม่มีการสนับสนุนสำหรับ Flexbox ใน Safari ที่น้อยกว่า 14

รองรับ Grid gap ใน Safari เวอร์ชันก่อนหน้า ดังนั้น ควรเปลี่ยนจาก display flex เป็น grid

3. ใช้ตัวเลือกนกฮูก lobotomized

1. เปิดไฟล์ CSS ในโปรแกรมแก้ไขที่คุณชื่นชอบ
2. ตอนนี้เพิ่มรหัสบรรทัดนี้:.parent_div>*+* { ระยะขอบซ้าย: 8rem;}

   

3. บันทึกการเปลี่ยนแปลง.

ตัวเลือก CSS สามอักขระที่ผิดปกติมีอยู่ในรูปแบบของตัวเลือกนกฮูกที่ทำ lobotomized เพราะมันมีลักษณะที่แปลกประหลาดกับรูปลักษณ์ที่ว่างเปล่าของนกฮูก มันถูกเรียกว่าตัวเลือกนกฮูก lobotomized

ฉันจะใช้อะไรแทนช่องว่างใน CSS ได้บ้าง

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

อย่างไรก็ตาม ดูเหมือนว่าปัญหาช่องว่างจะได้รับการแก้ไขใน Safari เวอร์ชันใหม่กว่า ดังนั้นคุณจะไม่ต้องใช้วิธีแก้ไขปัญหาชั่วคราวอีกต่อไป

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

นี่เป็นปัญหาฝั่งไคลเอ็นต์ แต่หลายๆ ปัญหามีปัญหาฝั่งเซิร์ฟเวอร์ เช่น เซิร์ฟเวอร์หยุดตอบสนอง Safari ข้อความ แต่สิ่งเหล่านี้สามารถแก้ไขได้เช่นกัน

คุณจัดการเพื่อแก้ไขปัญหาช่องว่างใน Safari หรือไม่? แจ้งให้เราทราบว่าโซลูชันใดที่เหมาะกับคุณ