เค้าโครงหน้าเว็บ CSS พูดยาก แต่จริงๆ แล้วเรียบง่ายมาก ว่ากันว่าเป็นเรื่องง่าย แต่มักจะมีปัญหามากมายที่ทำให้เกิดปัญหา มีการแนะนำเทคนิคมากมายที่ http://www.knowsky.com/article.asp?typeid=38 เคล็ดลับและความรู้เหล่านี้สามารถช่วยให้ทุกคนได้รับสองเท่า ผลลัพธ์มีความพยายามเพียงครึ่งเดียว อย่างไรก็ตาม บ่อยครั้งเรามักจะประสบปัญหาเล็กๆ น้อยๆ และไม่สามารถผ่อนคลายได้ วันนี้ผมอยากจะแนะนำเทคนิค 8 ประการที่ดูเหมือนจะมีประโยชน์มากให้กับคุณ
1. หากคุณมีข้อสงสัย ให้ตรวจสอบทันที หากคุณสามารถตรวจสอบโค้ดต้นฉบับแบบง่ายๆ เมื่อเกิดข้อผิดพลาด จะช่วยประหยัดเรื่องปวดหัวได้มาก W3C มีเครื่องมือตรวจจับสำหรับ XHTML และ CSS โปรดดูที่ http://validator.w3.org โปรดทราบว่าข้อผิดพลาดที่จุดเริ่มต้นของไฟล์อาจทำให้เกิดข้อผิดพลาดมากขึ้นเนื่องจากโครงสร้างที่ไม่เหมาะสมและปัจจัยอื่นๆ เราขอแนะนำให้แก้ไขข้อผิดพลาดที่ชัดเจนที่สุดก่อนแล้วจึงตรวจสอบอีกครั้ง ซึ่งอาจลดจำนวนข้อผิดพลาดได้
2. เมื่อใช้ฟังก์ชันลอยตัว อย่าลืมล้างคำสั่งอย่างเหมาะสมเป็นฟังก์ชันที่อันตรายและอาจไม่ให้ผลลัพธ์ตามที่คุณคาดหวัง หากคุณพบองค์ประกอบลอยที่ขยายเกินขอบเขตของคอนเทนเนอร์โดยรอบหรือสถานการณ์ที่ผิดปกติอื่นๆ ตรวจสอบให้แน่ใจว่าคุณทำอย่างถูกต้อง
3. ใช้ช่องว่างภายในหรือเส้นขอบเมื่อเส้นขอบเหลื่อมกัน เพื่อป้องกันไม่ให้คุณกังวลเกี่ยวกับพื้นที่เล็กๆ น้อยๆ ที่ไม่ควรอยู่ หรือเมื่อคุณต้องการพื้นที่เพียงเล็กน้อย คุณไม่สามารถบีบออกได้ไม่ว่ายังไงก็ตาม หากคุณใช้ระยะขอบ เป็นเรื่องง่ายที่จะทับซ้อนขอบเขต
4. พยายามหลีกเลี่ยงการระบุช่องว่างภายใน/เส้นขอบ และความสูงหรือความกว้างสำหรับองค์ประกอบต่างๆ ในเวลาเดียวกัน IE เวอร์ชัน Windows มักจะทำให้เกิดปัญหาในการคำนวณเกี่ยวกับความกว้างและความสูง มีวิธีแก้ปัญหานี้อยู่บ้าง แต่หากองค์ประกอบหลักจำเป็นต้องระบุความสูงและความกว้าง วิธีที่ดีที่สุดคือใช้ระยะขอบกับองค์ประกอบย่อยภายในองค์ประกอบหลัก หรือเมื่อองค์ประกอบย่อยจำเป็นต้องระบุความสูงและความกว้าง ใช้ช่องว่างภายในกับองค์ประกอบหลักเพื่อให้บรรลุผลนี้
5. อย่าพึ่งพาความกว้างขั้นต่ำ/ความสูงขั้นต่ำ
IE เวอร์ชัน Windows ไม่รองรับทั้งสองไวยากรณ์ แต่ในระดับหนึ่ง IE เวอร์ชัน Windows สามารถบรรลุผลเทียบเท่ากับความกว้างขั้นต่ำ/ความสูงขั้นต่ำ ดังนั้นตราบใดที่คุณเพิ่มฟังก์ชันการกรองบางอย่างลงใน IE คุณก็จะได้ผลลัพธ์ที่ต้องการ
6. หากมีข้อสงสัยให้ลดเปอร์เซ็นต์ลงก่อน บางครั้งข้อผิดพลาดอาจทำให้ 50%+50% กลายเป็น 100.1% ทำให้เกิดปัญหากับหน้าเว็บ ในเวลานี้ลองเปลี่ยนค่าเหล่านี้เป็น 49% หรือ 49.9%
7. โปรดจำไว้ว่าไวยากรณ์ตัวย่อของ "TRBL" สำหรับเส้นขอบ ระยะขอบ และช่องว่างภายในมีลำดับเฉพาะ โดยเริ่มจากด้านบนและหมุนตามเข็มนาฬิกา: บน ขวา ล่าง ซ้าย ดังนั้นผลลัพธ์ของระยะขอบ: 0 1px 3px 5px; ไม่มีเส้นขอบที่ด้านบน 1 พิกเซลทางด้านขวา และอื่นๆ จำ "TRBL" แล้วคุณจะไม่เข้าใจลำดับผิด
8. ตราบใดที่ค่าไม่เป็นศูนย์ จะต้องระบุหน่วยนี้ ซึ่งต้องได้รับการดูแลเป็นพิเศษ เพื่อนมือใหม่หลายคนมักเพิกเฉยต่อปัญหานี้