วิธีการเรนเดอร์ของแอตทริบิวต์ border ในเบราว์เซอร์มีการพูดคุยกันในกลุ่ม QQ มาเป็นเวลานาน และฉันใช้ border:0 none เสมอเพื่อจัดการกับมัน แน่นอนว่ายังมีเหตุผลว่าทำไมฉันถึงทำอย่างนั้น เหตุผลนี้จะกล่าวถึงในการวิเคราะห์ด้านล่าง ก่อนที่จะวิเคราะห์คุณสมบัติของเส้นขอบ จำเป็นต้องอธิบายบางประเด็นก่อน:
เพื่อเปรียบเทียบสไตล์เส้นขอบได้ดีขึ้น เราเลือกองค์ประกอบ "ปุ่ม" แต่แท็กที่ใช้จะแตกต่างกัน อย่างไรก็ตาม สิ่งหนึ่งที่ต้องกล่าวถึงคือสิ่งที่องค์ประกอบป้ายกำกับทั้งสองนี้มีเหมือนกันในเบราว์เซอร์ต่างๆ ก็คือ ทั้งสององค์ประกอบเป็นตัวควบคุมระบบ รูปแบบเส้นขอบและพื้นหลังของปุ่มมีความสัมพันธ์ที่สมบูรณ์กับธีมของระบบ
ใช้โค้ดโครงสร้าง XHTML เดียวกัน เปรียบเทียบเบราว์เซอร์ FF และเบราว์เซอร์ IE ตามลำดับ
<ประเภทอินพุต = "ปุ่ม" ค่า = "ปุ่ม" />
<ชม. />
<ปุ่ม>ปุ่ม
แอนิเมชันสาธิต 1 แอนิเมชันสาธิต 2
จากอิทธิพลของรูปแบบเริ่มต้นของธีมระบบปัจจุบัน เราพบว่าเบราว์เซอร์ IE มีความแตกต่างเล็กน้อยในการแยกวิเคราะห์องค์ประกอบแท็กทั้งสอง ปุ่ม และอินพุต แต่เท่าที่หน้าที่เห็นในธีมระบบปัจจุบันคือ ที่เกี่ยวข้องผลการปฏิบัติงานเกือบจะเหมือนกัน ในผลลัพธ์แอตทริบิวต์ที่เห็นในคอลัมน์ด้านบนโดยไม่มีคำจำกัดความสไตล์ CSS ผลลัพธ์ที่เราได้รับคือ:
*FF Browser: รูปแบบเส้นขอบของแท็กอินพุตและแท็กปุ่มคือ border-width:3px; border-style:outset;
* เบราว์เซอร์ IE: รูปแบบเส้นขอบของป้ายกำกับอินพุตคือ border-width:2px; border-style:outset; และรูปแบบเส้นขอบของป้ายกำกับปุ่มคือ border-width:2px;
ด้วยข้อมูลนี้ เรามาดูกันว่าผลลัพธ์จะเป็นอย่างไรเมื่อเรากำหนดสไตล์สำหรับแอตทริบิวต์ border