CSS : 0.1em === WTF, 부동 소수점 부정확? 나는 최근 크롬에 내 맥 도서 공기에 바이올린을 열면

Question

http://jsfiddle.net/7yda75v0/8/

(38.0.2125.104)의 높이에, 그것은 10의 사파리 (7.0.3 (9537.75.14))에 8입니다 Firefox (32.0.3) .

내 동료 거의 같은 컴퓨터에서 (내 맥 1.7 Ghz, 그의 2.0Ghz있다). Mac book pro device의 값이 다릅니다.

부동 소수점 부정확 한 것처럼 보이지만 그 이유는 무엇입니까? 그것은 브라우저가 아니고 디스플레이가 아닙니다. 당신이 더 differnces에 .t2 결과 1.0em에 글꼴 크기를 변경 CMD +

를 통해 브라우저 줌을 사용할 때 당신은 브라우저 줌, 일부 재미 값을 얻을 수 있습니다. 이 문제뿐만 아니라 em 발생 아니라 rem입니다 : 문제는 아주 작은 EM 값에 한정되지 않고, , 그것은 1.1em

// 편집처럼, 또한 비 자연수에 대해 존재합니다.

Answer 1

rem은 루트 글꼴 크기를 기반으로 계산됩니다. 각 브라우저와 디스플레이는 다른 픽셀 값을 계산합니다. 또한 css 픽셀은 반드시 화면 픽셀 또는 브라우저의 계산 결과 화면 픽셀과 일치하지 않습니다. 브라우저 줌 값 변경, 당신이 확대되면 루트 글꼴 크기를 변경하기 때문에

편집 :.

이

.t1-.t2 상대의 실제 크기는 리눅스에서, 내가 크롬을 제외하고이 모든 브라우저에 대한 올바른 것으로 보인다 , OSX 및 Windows. 계속 축소하면 .t2이 .t1보다 크게 표시됩니다. 그러나 0.2rem 및 1rem과 같은 값은 올바르게 표시됩니다. 확대/축소시 OSX (7.0.6)의 Safari, Linux의 Firefox 및 Windows의 IE가 모두 올바르게 표시됩니다.