백분율 기준 레이아웃의 갭

Question

% 레이아웃에 문제가 있습니다. 여기 내 코드는 http://jsfiddle.net/uHkXH/

Mac에서는 Safari 나 Opera, Windows에서는 IE7, iPhone iPad에서는 오른쪽에 간격이 표시됩니다. 그러나 네 개의 상자의 폭, 여백 및 여백은 총 100 % 여야합니다. 나는 아직도 갭이있는 이유를 이해할 수 없다.

누구든지이 문제를 설명하고 해결할 수 있습니까? 참으로 대단히 감사합니다!

Answer 1

특정 브라우저에서 서브 픽셀 (십진수) 너비를 반올림하는 데 문제가 있습니다. 백분율은 자동으로 픽셀로 변환됩니다.

계산 된 너비를 jsfiddle의 요소 픽셀 수로 더하면 컨테이너 요소의 너비까지 합치지는 않습니다. 여기

좀 더 정보 http://css-tricks.com/percentage-bugs-in-webkit/

및

How do I get around the IE CSS percentage rounding problem?

및

안녕이다

브라우저의 기능에 대한 정확한 정보가 없지만 이전에 을 추적했습니다.

폭 픽셀을 처리 할 때 :

는

파이어 폭스는 126px까지 125.5px 반올림하고 125.4px는 125px까지 를 반올림됩니다.

오페라는 126px로 126.9px 처리합니다 (그러나 126.999! 127px로는 취급) IE는 모든 소수점을 무시하고 취급이 126px로 126.9999px

.

백분율을 다룰 때.

Opera는 퍼센트의 모든 소수 부분을 전혀 고지하지 않는 것처럼 보입니다. 예 : 33.9 %은 정확히 33 %와 동일합니다. 따라서 1000px 너비의 33.333 %의 3 개 부동 소수점에 대해 오페라는 오른쪽 가장자리에 10px 간격을 표시합니다.

모질라는 사용 된 백분율 부분이 모두 이고, 최대 값은 이고, 최대 값은 1 픽셀 밖에되지 않습니다.

IE는 각 부분을 개별적으로 위아래로 반올림하므로 3 개의 float에 대해 3 픽셀이 너무 커서 플로트 드롭이 발생할 수 있습니다.

float가 떨어지는 것을 막으려면 즉, 여분의 공간을 흡수 할 마지막 float에 음수 인 여백을 적용 할 수 있습니다. (margin-right : -3px)

오페라를 들어이 치료법은 없지만, 아마도 마지막 요소는 공간이 필요한 에 맞게 또는 필요 이상 요소가 더 큰하고 더 큰 권리 부정적인 마진을 적용 할 수 있도록.

이는 그 때 눈에 띄는하지 않을 수 있습니다 상황에 따라 약간의 차이 있는 경우에도 그것은 모든 브라우저에 맞게 알고 때문에 대부분의 사람들이 단순히 33 %를 사용하는 이유입니다. (예 : 배경 요소의 배경색이 이면 숨길 수 있습니다.)