ตำแหน่งทศนิยมในความกว้าง CSS นั้นได้รับการยอมรับหรือไม่

225

บางสิ่งที่ฉันสงสัยในขณะทำการออกแบบ CSS

มีการวางตำแหน่งทศนิยมในความกว้างของ CSS หรือไม่ หรือว่าพวกเขาถูกปัดเศษ?

.percentage {
  width: 49.5%;
}

หรือ

.pixel {
  width: 122.5px;
}

html css

— Alastair Pitts
แหล่งที่มา

186

ถ้ามันเป็นความกว้างร้อยละแล้วใช่มันเป็นที่เคารพนับถือ อย่างที่มาร์ตินชี้ให้เห็นสิ่งต่าง ๆ พังทลายลงเมื่อคุณได้รับพิกเซลเศษส่วน แต่ถ้าค่าเปอร์เซ็นต์ของคุณให้ค่าพิกเซลจำนวนเต็ม (เช่นในตัวอย่าง 50.5% ของ 200px) คุณจะมีพฤติกรรมที่เหมาะสมและคาดหวัง

แก้ไข:ฉันได้อัปเดตตัวอย่างเพื่อแสดงสิ่งที่เกิดขึ้นกับพิกเซลเศษส่วน (ใน Chrome ค่าจะถูกตัดทอนดังนั้น 50, 50.5 และ 50.6 ทั้งหมดแสดงความกว้างเท่ากัน)

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

7

คุณถูกต้องเกี่ยวกับค่าร้อยละที่ไม่ได้ถูกปัดเศษ แต่ความกว้างของพิกเซลที่มีทศนิยมและผลลัพธ์สุดท้ายของการคำนวณเปอร์เซ็นต์จะถูกปัดเป็นพิกเซลทั้งหมดเสมอ :)

— MartinodF

2

@ MartininF ขอบคุณสำหรับการชี้แจง ใช่พิกเซลถูกปัดเศษ แต่ไม่ได้กำหนดว่าจริง ๆ แล้วพวกมันจะปัดเศษเป็นพื้นหรือเพดานที่ใกล้ที่สุด (ซึ่งเป็นสิ่งที่ฉันหมายถึงโดย

— Skilldrick

1

@Skilldrick ฉันลองพิกเซลเศษส่วนในการสาธิตของคุณบนเบราว์เซอร์บางอย่างเพื่อความอยากรู้: ทั้ง IE9p7 และ FF4b7 ปัดเป็นพิกเซลที่ใกล้ที่สุดขณะที่ Opera 11b, Chrome 9.0.587.0 และ Safari 5.0.3 ตัดทอนค่า @ andras เพียงชี้แจง: ฉันไม่ได้บอกว่าค่าภายในถูกปัดเศษเพียงค่าเรนเดอร์สุดท้ายเท่านั้น หากคุณซูมหรือองค์ประกอบบางอย่างสืบทอดคุณสมบัติและอื่น ๆ ตำแหน่งทศนิยมนั้นจะถูกนับ

— MartinodF

10

การอัปเดตที่ทันสมัย: Chrome รุ่น 24 ของฉันจริง ๆ แล้วปัดพิกเซลเศษส่วน การดู jsFiddle, 50.5 และ 50.6 รอบทั้งคู่สูงถึง 51px โดยกว้างกว่า 1 พิกเซล 50px

— Michael Butler

5

สิ่งที่สำคัญที่สุดที่ควรทราบคือองค์ประกอบที่มีขนาดพิกเซลเศษส่วนติดกัน ขณะที่พวกเขาทำขึ้นรอบสายตาด้วยตัวเองพวกเขายังไม่ใช้พื้นที่พิเศษเมื่อนำไปองค์ประกอบขนาด fractionally อื่น ๆ : cssdesk.com/8R2rB

— แซนดี้ Gifford

53

แม้ว่าหมายเลขจะถูกปัดเศษเมื่อหน้าถูกวาดค่าเต็มจะถูกเก็บไว้ในหน่วยความจำและใช้สำหรับการคำนวณลูกที่ตามมา ตัวอย่างเช่นหากกล่อง 100.4999px ของคุณมีสีถึง 100px เด็กที่มีความกว้าง 50% จะถูกคำนวณเป็น. 5 * 100.4999 แทนที่จะเป็น. 5 * 100 และในระดับที่ลึกลงไป

ฉันได้สร้างระบบโครงร่างแบบกริดที่ซ้อนกันอย่างลึกล้ำที่ความกว้างของผู้ปกครองคือ EMS และเด็ก ๆ คิดเป็นร้อยละและการรวมทศนิยมมากถึงสี่จุดขึ้นไปทางต้นน้ำก็มีผลกระทบที่เห็นได้ชัดเจน

กรณีขอบแน่นอน แต่สิ่งที่ต้องจำไว้

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

2

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

— ทอม

23

แม้ว่าพิกเซลเศษส่วนอาจปรากฏขึ้นรอบขึ้นในแต่ละองค์ประกอบ (ตาม@SkillDrickแสดงให้เห็นเป็นอย่างดี) มันเป็นสิ่งสำคัญที่จะรู้ว่าพิกเซลเศษส่วนมีความเคารพนับถือจริงในรูปแบบกล่องที่เกิดขึ้นจริง

สิ่งนี้สามารถเห็นได้ดีที่สุดเมื่อองค์ประกอบถูกซ้อนกันถัดจาก (หรือด้านบน) ซึ่งกันและกัน กล่าวอีกนัยหนึ่งถ้าฉันวาง 400 0.5 พิกเซล divs เคียงข้างกันพวกเขาจะมีความกว้างเท่ากับ div 200 พิกเซลเดียว หากพวกเขาทั้งหมดจริงปัดเศษขึ้น 1px (ในขณะที่กำลังมองหาที่แต่ละองค์ประกอบจะบ่งบอก) เราคาดหวัง 200px div จะเป็นครึ่งหนึ่งเป็นเวลานาน

สามารถเห็นได้ในตัวอย่างโค้ดที่รันได้นี้:

body {
  color:            white;
  font-family:      sans-serif;
  font-weight:      bold;
  background-color: #334;
}

.div_house div {
  height:           10px;
  background-color: orange;
  display:          inline-block;
}

div#small_divs div {
  width:            0.5px;
}

div#large_div div {
  width:            200px;
}

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

ขยายตัวอย่างข้อมูล

— แซนดี้กริฟฟอร์ด
แหล่งที่มา

11

ในส่วนที่เกี่ยวกับการเรนเดอร์: ในตัวอย่างคุณมีการแข่งขันสอง divs สำหรับแต่ละพิกเซล ในกรณีเหล่านี้เบราว์เซอร์ของคุณจะเลือกหนึ่งในนั้นเพื่อแสดงพิกเซลทั้งหมด - เพื่อหลีกเลี่ยงการเบลอและสิ่งแปลกประหลาดอื่น ๆ หากคุณตั้งค่าพิกเซลครึ่งหนึ่งให้เป็นสีน้ำเงินโดยใช้:nth-child(even)หรือ:nth-child(odd)คุณสังเกตเห็นว่าสิ่งทั้งหมดเป็นสีส้มหรือสีทั้งหมดเป็นสีน้ำเงินไม่ใช่ส่วนผสมของสีน้ำเงินและสีส้ม

— Daan Wilmer

16

ความกว้างจะถูกปัดเศษให้เต็มจำนวนพิกเซล

ฉันไม่รู้ว่าเบราว์เซอร์ทุกตัวจะปัดเศษในลักษณะเดียวกัน พวกเขาดูเหมือนจะมีกลยุทธ์ที่แตกต่างกันเมื่อปัดเศษเปอร์เซ็นต์ของพิกเซลย่อย หากคุณสนใจในรายละเอียดของพิกเซลย่อยปัดเศษในเบราว์เซอร์ที่แตกต่างกันมีบทความที่ดีใน ElastiCSS

แก้ไข : ฉันทดสอบการสาธิตของ @ Skilldrick ในบางเบราว์เซอร์เพื่อความอยากรู้อยากเห็น เมื่อใช้ค่าพิกเซลเศษส่วน(ไม่ใช่เปอร์เซ็นต์จะทำงานตามที่แนะนำในบทความที่ฉันเชื่อมโยง) IE9p7 และ FF4b7 ดูเหมือนจะปัดเป็นพิกเซลที่ใกล้ที่สุดขณะที่ Opera 11b, Chrome 9.0.587.0 และ Safari 5.0.3 ตัดทศนิยมตำแหน่ง ไม่ใช่ว่าฉันหวังว่าพวกเขาจะมีอะไรที่เหมือนกันหลังจากทั้งหมด ...

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

7

พวกเขาดูเหมือนจะปัดเศษค่าเป็นจำนวนเต็มที่ใกล้เคียงที่สุด แต่เอี่ยมก็เห็นความไม่สอดคล้องกันในโครเมี่ยมซาฟารีและ Firefox

เช่นถ้า 33.3% แปลงเป็น 420.945px

chrome และ firexfox แสดงเป็น 421px ในขณะที่ซาฟารีแสดง 420px

ดูเหมือนว่าโครเมี่ยมและ Firefox ตามพื้นและเพดานตรรกะในขณะที่ซาฟารีไม่ได้ หน้านี้ดูเหมือนจะพูดถึงปัญหาเดียวกัน

http://ejohn.org/blog/sub-pixel-problems-in-css/

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

6

องค์ประกอบต่าง ๆ ต้องทาสีให้เป็นจำนวนเต็มพิกเซลและในขณะที่คำตอบอื่น ๆ ที่ครอบคลุมนั้นจะมีการเคารพเปอร์เซ็นต์

หมายเหตุสำคัญคือพิกเซลในกรณีนี้หมายถึงพิกเซล cssไม่ใช่พิกเซลหน้าจอดังนั้นคอนเทนเนอร์ 200px ที่มีลูก 50.7499% จะถูกปัดเศษเป็นพิกเซล css 101px จากนั้นแสดงบน 202px บนหน้าจอเรตินาและไม่ใช่ 400 * 507499 ~ = 203px

ความหนาแน่นของหน้าจอถูกละเว้นในการคำนวณนี้และไม่มีวิธีการทาสี * องค์ประกอบของขนาดพิกเซลย่อยเรตินาที่เฉพาะเจาะจง คุณไม่สามารถมีพื้นหลังหรือเส้นขอบขององค์ประกอบที่ขนาดพิกเซลน้อยกว่า 1 cssถึงแม้ว่าขนาดขององค์ประกอบจริงอาจน้อยกว่า 1 css พิกเซลตามที่ Sandy Gifford แสดง

[*] คุณสามารถใช้เทคนิคบางอย่างเช่น 0.5 offset box-shadow ฯลฯ แต่คุณสมบัติของโมเดลกล่องจริงจะทาสีให้กับพิกเซล CSS แบบเต็ม

— Olex Ponomarenko
แหล่งที่มา

สังเกตที่ดีเยี่ยม

— สิงหาคม