CSS มีความกว้างรวมถึงการเติมเต็มหรือไม่?

146

ดูเหมือนว่าใน IE ความกว้างจะรวมถึงขนาดของช่องว่างภายใน ในขณะที่อยู่ใน FF ความกว้างไม่ได้ ฉันจะทำให้ทั้งสองประพฤติเหมือนกันได้อย่างไร

ขอบคุณ

css

— เจค
แหล่งที่มา

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

— Jeff Hubbard

307

IE เคยใช้โมเดลกล่องแบบ"border-box" ที่สะดวกกว่า แต่ไม่ได้มาตรฐาน ในรุ่นนี้ความกว้างขององค์ประกอบรวมถึงการขยายและขอบ ตัวอย่างเช่น
#foo { width: 10em; padding: 2em; border: 1em; }
จะ10emกว้าง
ในทางตรงกันข้ามทุกมาตรฐานกลัวเบราว์เซอร์เริ่มต้นไปยังเนื้อหา "กล่อง"รูปแบบกล่อง ในรุ่นนี้ความกว้างขององค์ประกอบไม่รวมการขยายหรือขอบ ตัวอย่างเช่น:
#foo { width: 10em; padding: 2em; border: 1em; }
จะ16emกว้างจริง: 10em+ 2empadding สำหรับแต่ละด้าน + 1emชายแดนสำหรับแต่ละขอบ

ถ้าคุณใช้รุ่นที่ทันสมัยของ IE กับมาร์กอัปที่ถูกต้องเป็นประเภทเอกสารที่ดีและส่วนหัวที่เหมาะสมก็จะเป็นไปตามมาตรฐาน มิฉะนั้นคุณสามารถบังคับให้เบราว์เซอร์ที่ได้มาตรฐานที่ทันสมัยใช้ "กล่องเส้นขอบ" ผ่าน:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

การประกาศครั้งแรกนั้นจำเป็นสำหรับ Opera ส่วนที่สองคือสำหรับ Firefox ส่วนที่สามใช้สำหรับ Webkit และ Chrome

นี่คือการทดสอบง่ายๆที่ฉันทำเมื่อหลายปีมาแล้วเพื่อทดสอบว่ากล่องขนาดใดที่เบราว์เซอร์ของคุณรองรับ: http://phrogz.net/CSS/boxsizing.html

โปรดทราบว่า Webkit (Safari และ Chrome) ไม่สนับสนุนpadding-boxรูปแบบกล่องผ่านการประกาศใด ๆ

— Phrogz
แหล่งที่มา

2

+1 สำหรับการกล่าวถึงทั้งกล่องเนื้อหาและโมเดลกล่องขอบ อาจต้องการอธิบายอย่างละเอียดถึงความแตกต่าง

— BoltClock

1

@BoltClock ขอบคุณสำหรับแรงผลักดันที่จะตอบอย่างจริงจังมากขึ้น Updated

— Phrogz

คำตอบที่ดี; ฉันพยายามจะจำ (หรือค้นหา) ชื่อของตัวเลือกที่แตกต่างกันสองสามวันแล้ว ... +1 =)

— เดวิดบอกว่าคืนสถานะโมนิก้า

ไม่มีใครสนใจโอเปร่า

— Michael J. Calkins

3

@whitelettersinblankpapers ดูว่าทำไม W3Schools ครับแล้วการอ้างอิงที่ดีกว่าที่จะนำคุณไปมาตรฐานของ W3C อย่าติดตามลิงก์ใด ๆ เพิ่มเติมไปยัง W3Schools นอกจากนี้ให้เพิ่ม "MDN" ในข้อความค้นหาของเครื่องมือค้นหาของคุณเกี่ยวกับมาตรฐานเว็บในอนาคต

— Phrogz

27

กฎง่าย ๆ คือพยายามหลีกเลี่ยงการใช้คุณสมบัติการใส่ / ระยะขอบและความกว้างสำหรับองค์ประกอบเดียวกัน ie ใช้สิ่งที่คล้ายกับสิ่งนี้

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— shankhan
แหล่งที่มา

ฉันใช้วิธีนี้เป็นประจำและไม่เคยมีปัญหาเบราว์เซอร์ข้ามกับมัน

— Kevin Beal

20

ฉันชนกับคำถามนี้และแม้ว่าจะเป็นสองสามปีที่ผ่านมาฉันคิดว่าฉันอาจเพิ่มในกรณีที่ทุกคนกระแทกเข้ากับหัวข้อนี้

ตอนนี้ CSS3 มีคุณสมบัติการปรับขนาดกล่อง ถ้าคุณตั้งค่าพูด

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

คลาสของคุณจะกว้าง 1,000px แทนที่จะเป็น 1030px แน่นอนว่านี่มีประโยชน์อย่างเหลือเชื่อสำหรับทุกคนที่ใช้เส้นขอบพิกเซลกับตัวหารเหลวเพราะมันแก้ปัญหาที่ไม่ละลายน้ำได้

ยิ่งไปกว่านั้นการปรับขนาดกล่องรองรับโดยเบราว์เซอร์หลักทั้งหมดยกเว้น IE7 และด้านล่าง หากต้องการรวมรายการทั้งหมดภายในมิติความกว้างหรือความสูงให้ตั้งขนาดกล่องเป็นกล่องขอบ หากต้องการรวมรายการอื่น ๆ เข้ากับความกว้างและ / หรือความสูงซึ่งเป็นค่าเริ่มต้นคุณสามารถตั้งค่าขนาดกล่องเป็น "กล่องเนื้อหา"

ฉันไม่แน่ใจเกี่ยวกับสถานะปัจจุบันของไวยากรณ์เบราว์เซอร์ แต่ฉันยังคงมีคำนำหน้า -moz และ -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Mason Barge
แหล่งที่มา

ใช่และ Paul Irish มีบทความบล็อกที่ดีเกี่ยวกับที่นี่: paulirish.com/2012/box-sizing-border-box-ftw

— Dave Burton

คำตอบนี้มี upvotes มากมายเมื่อใดคำตอบเดียวกับคำตอบที่ถูกเขียนเมื่อ 3 ปีก่อน?

— dippas

1

คุณมีการประกาศ doctype หรือไม่? เมื่อฉันเริ่มเขียนโค้ด html ฉันพบปัญหานี้และเป็นเพราะไม่มีการประกาศประเภทเอกสาร สิ่งที่ฉันชอบคือ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
แหล่งที่มา

1

สำหรับผู้ที่ยังคงมีปัญหาjQueryได้จัดเตรียมสองคุณสมบัติouterWidth ()และinnerWitdh ()เพื่อทราบความกว้างของวัตถุที่มีหรือไม่มีเส้นขอบ ...

— แพทริค
แหล่งที่มา