เว็บเบราเซอร์ของวันนี้ได้มาไกลจากวันที่บ้าที่ใด ๆ ของความสอดคล้องข้ามเบราว์เซอร์เป็นความปรารถนาปรารถนา เว็บเบราเซอร์ในปัจจุบันเป็นไปตามมาตรฐานทั้งหมด พวกเขาเล่นด้วยกันและแสดงหน้าเว็บที่สอดคล้องกันอย่างสม่ำเสมอในเบราว์เซอร์ต่างๆ ซึ่งรวมถึง Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari และเบราว์เซอร์ต่างๆที่พบใน โทรศัพท์มือถือจำนวนมาก ที่ใช้ในการเข้าถึงเว็บไซต์ในวันนี้
แม้ว่าความคืบหน้าจะเกิดขึ้นอย่างแน่นอนเมื่อกล่าวถึงเว็บเบราเซอร์และวิธีการแสดงผล CSS แต่ก็ยังมีความไม่สอดคล้องกันระหว่างตัวเลือกซอฟต์แวร์ต่างๆเหล่านี้ หนึ่งในความไม่สอดคล้องกันทั่วไปคือวิธีที่เบราว์เซอร์เหล่านี้คำนวณระยะขอบส่วนขยายและเส้นขอบตามค่าเริ่มต้น
เนื่องจากลักษณะเหล่านี้ของโมเดลกล่องจึงมีผลต่อองค์ประกอบ HTML ทั้งหมดและเนื่องจากมีความจำเป็นในการสร้างเค้าโครงหน้าเว็บการแสดงผลที่ไม่สอดคล้องกันจะทำให้หน้าเว็บดูดีขึ้นในเบราว์เซอร์หนึ่ง แต่ดูเล็กน้อยในอีกรูปแบบหนึ่ง เพื่อต่อสู้กับปัญหานี้นักออกแบบเว็บจำนวนมากได้ปรับรูปแบบของรูปแบบกล่องเหล่านี้ให้เป็นปกติ การปฏิบัตินี้เรียกว่า "zeroing out" ค่าสำหรับขอบการเบาะและเส้นขอบ
หมายเหตุเกี่ยวกับค่าเริ่มต้นของเบราว์เซอร์
เว็บเบราเซอร์ทั้งหมดมีการตั้งค่าเริ่มต้นสำหรับด้านการแสดงผลบางอย่างของหน้า ตัวอย่างเช่นการเชื่อมโยงหลายมิติเป็นสีน้ำเงินและขีดเส้นใต้ตามค่าเริ่มต้น นี่เป็นสิ่งที่สอดคล้องกันในเบราว์เซอร์ต่างๆและถึงแม้จะเป็นสิ่งที่นักออกแบบส่วนใหญ่เปลี่ยนแปลงเพื่อให้เหมาะกับความต้องการด้านการออกแบบของโครงการเฉพาะของพวกเขา แต่ความจริงที่ว่าพวกเขาทั้งหมดเริ่มต้นด้วยค่าเริ่มต้นเดียวกันช่วยให้สามารถทำการเปลี่ยนแปลงเหล่านี้ได้ง่ายขึ้น น่าเสียดายที่ค่าดีฟอลต์สำหรับขอบการเว้นวรรคและเส้นขอบจะไม่ได้รับความสอดคล้องกันระหว่างเบราว์เซอร์เท่ากัน
การปรับค่านิยมสำหรับขอบและส่วนต่อท้าย
วิธีที่ดีที่สุดในการแก้ปัญหาของรูปแบบกล่องที่ไม่สอดคล้องกันคือการกำหนดระยะขอบและค่าเบาะสำหรับองค์ประกอบ HTML ทั้งหมดให้เป็นศูนย์ มีวิธีการบางอย่างที่คุณสามารถทำได้คือการเพิ่มกฎ CSS นี้ในสไตล์ชีตของคุณ:
* {margin: 0; padding: 0; }กฎ CSS นี้ใช้อักขระ * หรืออักขระตัวแทน อักขระนี้มีความหมายว่า "องค์ประกอบทั้งหมด" และโดยทั่วไปแล้วจะเลือกองค์ประกอบ HTML ทั้งหมดและกำหนดระยะขอบและส่วนขยายเป็น 0 ถึงแม้ว่ากฎนี้ไม่ได้ระบุเป็นอย่างมากเนื่องจากอยู่ในสไตล์ชีตภายนอกของคุณ แต่ก็จะมีความจำเพาะสูงกว่าเบราว์เซอร์เริ่มต้น ค่าทำ เนื่องจากค่าดีฟอลต์เหล่านี้คือสิ่งที่คุณเขียนทับไว้รูปแบบนี้จะทำให้คุณได้รับสิ่งที่ต้องการ
อีกทางเลือกหนึ่งคือการใช้ค่าเหล่านี้กับองค์ประกอบ HTML และองค์ประกอบของร่างกาย เนื่องจากองค์ประกอบอื่น ๆ บนหน้าเว็บของคุณจะเป็นองค์ประกอบย่อยของทั้งสององค์ประกอบ CSS cascade ควรใช้ค่าเหล่านี้กับองค์ประกอบอื่น ๆ ทั้งหมด
html, body {margin: 0; padding: 0; }การทำเช่นนี้จะเริ่มต้นการออกแบบของคุณในที่เดียวกันในเบราว์เซอร์ทั้งหมด แต่สิ่งหนึ่งที่ต้องจดจำก็คือเมื่อคุณเปิดขอบทั้งหมดและการปิดช่องว่างคุณจะต้องเลือกให้เปิดเฉพาะบางส่วนของหน้าเว็บเพื่อให้ได้รูปลักษณ์ และรู้สึกว่าการออกแบบของคุณเรียกร้องให้
พรมแดน
คุณอาจจะคิดว่า "แต่ไม่มีเบราว์เซอร์ใดที่มีเส้นขอบล้อมรอบส่วนเนื้อหาของร่างกายโดยค่าเริ่มต้น" นี่ไม่ใช่ความจริงอย่างเคร่งครัด Internet Explorer รุ่นเก่ามีเส้นขอบโปร่งใสหรือมองไม่เห็นรอบ ๆ องค์ประกอบ ถ้าคุณไม่ได้กำหนดเส้นขอบเป็น 0 ขอบดังกล่าวอาจทำให้เค้าโครงหน้าเว็บเลอะขึ้น หากคุณตัดสินใจว่าคุณจะสนับสนุน IE เวอร์ชันที่เก่าแก่เหล่านี้ต่อไปคุณจะต้องแก้ไขปัญหานี้โดยเพิ่มเนื้อหาต่อไปนี้ลงในเนื้อหาในร่างกายและ HTML ของคุณ:
HTML, body {
margin: 0px;
padding: 0px;
เส้นขอบ: 0px;
}
คล้ายกับวิธีที่คุณปิดขอบและ padding สไตล์ใหม่นี้จะปิดเส้นขอบเริ่มต้น คุณสามารถทำสิ่งเดียวกันได้โดยใช้ตัวเลือก wildcard ที่แสดงไว้ก่อนหน้านี้ในบทความ
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 9/27/16