CSS 너비의 소수점 이하 자릿수가 존중됩니까?

225

CSS 디자인을하는 동안 한동안 궁금했던 점이 있습니다.

CSS 너비의 소수점 이하 자릿수가 존중됩니까? 아니면 반올림됩니까?

.percentage {
  width: 49.5%;
}

또는

.pixel {
  width: 122.5px;
}

html css

— 알라 스테 어 피트
소스

186

너비가 백분율이면 그렇습니다 . Martin이 지적했듯이 분수 픽셀에 도달하면 문제가 발생하지만 백분율 값이 정수 픽셀 값 (예 : 200px의 50.5 %)을 산출하면 합리적이고 예상되는 동작을 얻습니다.

편집 : 나는 한 부분 픽셀 어떻게되는지 보여주는 예 업데이트 (크롬의 값이 너무 50, 50.5 및 50.6 모두 같은 폭을 보여립니다을).

— 스킬 드릭
소스

7

백분율 값 자체는 반올림되지 않지만 소수점 이하 자릿수를 가진 픽셀 너비 및 백분율 계산의 최종 결과는 항상 전체 픽셀로 반올림됩니다. :)

— MartinodF

2

@MartinodF 설명해 주셔서 감사합니다. 그렇습니다. 픽셀은 둥글지만 실제로 가장 가까운, 바닥 또는 천장으로 반올림되는지 여부는 정의되어 있지 않습니다 ( "무엇이 고장 났는지").

— 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을 모두 50px div보다 1 픽셀 넓게 올림하여 51px로 올림합니다.

— Michael Butler

5

가장 중요한 것은 분수 픽셀 크기의 요소가 서로 옆에 쌓이는 방식입니다. 그들이하는 동안 수행 : 그 자체로 시각적 라운드까지, 그들은 또한 다른 분수 치수 요소 옆에 넣어 여분의 공간을 차지하지 않습니다 cssdesk.com/8R2rB

— 샌디 포드

53

페이지를 칠할 때 숫자가 반올림 되더라도 전체 값은 메모리에 유지되고 후속 자식 계산에 사용됩니다. 예를 들어 100.4999px의 상자가 100px로 페인트되는 경우 너비가 50 % 인 자식은 .5 * 100 대신 .5 * 100.4999로 계산됩니다. 그리고 더 깊은 수준으로.

부모 너비가 ems이고 자식이 백분율 인 깊게 중첩 된 그리드 레이아웃 시스템을 만들었으며 최대 4 개의 소수점을 포함하면 눈에 띄는 영향을 미쳤습니다.

가장자리 케이스는 확실하지만 명심해야 할 점이 있습니다.

— 네이트 코트 리
소스

2

받아 들여진 대답은 이것보다 더 완전하지만, 이것의 일화는 기술적 함의가 어떻게 느끼게되는지에 대한 더 나은 느낌을줍니다. 게시 해 주셔서 감사합니다.

— Tom

23

@SkillDrick이 잘 설명 하는 것처럼 분수 픽셀이 개별 요소에서 반올림되는 것처럼 보일 수 있지만 분수 상자는 실제로 실제 상자 모델에서 존중됨을 알아야합니다 .

이것은 요소가 서로 옆에 (또는 위에) 쌓일 때 가장 잘 볼 수 있습니다. 즉, 400 0.5 픽셀 div를 나란히 배치하면 단일 200 픽셀 div와 동일한 너비를 갖습니다. 모든 요소가 실제로 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

렌더링과 관련하여 : 예를 들어, 각 픽셀마다 경쟁하는 두 개의 div가 있습니다. 이 경우, 브라우저는 흐릿함과 다른 이상한 인공물을 피하기 위해 전체 픽셀을 렌더링하기 위해 그 중 하나를 선택합니다. 를 설정하면 픽셀의 절반 사용, 파란색 할 수 :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

그들은 값을 가장 가까운 정수로 반올림합니다. 그러나 크롬, 사파리 및 파이어 폭스에서 불일치를보고 있습니다.

예를 들어 33.3 %가 420.945px로 변환되는 경우

크롬과 파이어 폭스는 421px로 표시합니다. 사파리는 420px로 표시합니다.

이것은 사파리가하지 않는 동안 크롬과 파이어 폭스가 바닥을 따라 가며 논리를 쉰 것처럼 보입니다. 이 페이지는 같은 문제를 논의하는 것 같습니다

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

— 아가 아제
소스

6

요소는 정수 수의 픽셀로 페인트해야하며 다른 답변이 다룰 때 백분율은 실제로 존중됩니다.

중요한 경우이 픽셀 은 화면 픽셀이 아닌 css 픽셀을 의미 하므로 50.7499 % 자식을 가진 200px 컨테이너는 101px css 픽셀 로 반올림되어 400 *가 아닌 202px로 렌더링됩니다 . 507499 ~ = 203 픽셀

이 계산에서 화면 밀도는 무시되며 특정 망막 서브 픽셀 크기로 요소를 페인트 * 할 방법이 없습니다. Sandy Gifford가 보여 주듯이 실제 요소의 크기가 1 CSS 픽셀보다 작을 수 있지만 요소의 배경 또는 테두리를 1 CSS 픽셀 크기 미만으로 렌더링 할 수는 없습니다 .

[*] 0.5 오프셋 상자 그림자와 같은 기술을 사용할 수 있지만 실제 상자 모델 속성은 전체 CSS 픽셀로 페인트됩니다.

— Olex Ponomarenko
소스

훌륭한 관찰

— 8 월