Chrome에서 em 단위 사용시 문제

Chrome에서 버전을 사용하는 중에 문제가 발생했습니다 (버전 31.0.1650.63 m). JSFiddle 크롬에서 잘못된 출력을 생성 후Chrome에서 em 단위 사용시 문제

(파이어 폭스 나 IE에 비해 녹색 상자가 너무 큽니다) :

HTML :

<div class="aaa"> 

    <div class="bbb"> 

    </div> 

</div>

CSS :

.aaa { 
    font-size: 0.5rem; 

    width: 30em; 
    height: 30em; 

    background: red; 
} 

.bbb { 
    font-size: 0.1em; 

    width: 15em; 
    height: 15em; 

    background: green; 
}

문제가 규칙 인 것 같습니다em을 10 배 더 작게하지 않는. 대신 em을 최소값으로 설정합니다. font-size: 0.1em과 font-size: 0.2em은 모두이 마법 최소값보다 작기 때문에 차이가 없습니다 ....

이 메시지는 버그입니까? 아니면 잘못된 것이 있습니까?

이 특별한 경우는 "bbb"클래스의 모든 값에 10을 곱하면 해결할 수 있습니다. 그러나 제 경우에는 더 복잡하고이 값이 필요합니다. font-size: 0.1em.

em 단위를 사용하여 확장 가능한 컨트롤을 구축하고 있습니다. 내 컨트롤에는 루트 div와 여러 자식 요소가 있습니다. 모든 값은 em을 사용하여 설정되고 em의 런타임 크기는 루트 요소의 font-size로 제어됩니다. 요소에 font-size가 정의되어 있으면, em에 의존합니다.

의견이나 제안을 보내 주시면 감사하겠습니다.

업데이트 : 서로 다른 출력

있는 스크린 샷은 내가 대해 말하기 오전 :

enter image description here

출처

2014-01-14 Andrej

재생할 수 없습니다. Firefox (26), Chrome (31.0.1650.63 m) 및 Opera (Presto)는 모두 녹색 상자를 빨간색 상자의 1/4 크기로 렌더링합니다. IE9 만 녹색 상자를 예외적으로 작게 만듭니다. – cimmanon

@cimmanon : 어떤 OS입니까? FF 26, Windows 7에서 12x12 초록색 상자가 보입니다. – 412

Windows 7도 사용 중입니다. – cimmanon

기본 글꼴 크기가 em 크기는 크기를 선언 할 필요에 의미 무엇 때문에 에 대한 글꼴을 보편적으로 그들을 위해.

http://jsfiddle.net/j72aZ/1/

이 바이올린은 12 픽셀로 전 세계적으로 글꼴 크기를 선언하고 사용자의 브라우저의 기본 인 선언되지 않은 크기에 반대 다음 브라우저는, 그 12 픽셀에 보편적으로 그들을 크기를 취급합니다.

이 사이트는 추가 지원을 할 수 있습니다 좋은 자료가 있습니다

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

출처

2014-01-14 18:46:22 Phlume

당신은 rem에 대해서 이야기하는 것처럼 들립니다. em은 부모 요소의 글꼴 크기에 따라 다릅니다. 그럼에도 불구하고 당신의 예는 나의 예에서 문제를 해결한다. 실제로는 rem을 사용하여 설정하는 대신 aaa 클래스의 글꼴 크기를 픽셀 단위로 설정하는 것으로 충분합니다. http://jsfiddle.net/rapik/j72aZ/5/ 나중에 더 많은 테스트를 수행합니다 :-) – Andrej

@Andrej this 솔루션으로 문제가 해결되면이를 허용으로 표시해야합니다. –

이이 최소 글꼴 크기 설정이 크롬 (6 픽셀에서 낭패 있다는 사실에 의해 발생 30+) - 더 낮은 가격을 선택할 수 없습니다. 글꼴 크기를 .aaa으로 설정하면 계산 된 값이 8px이므로 문제가되지 않습니다. 그러나 font-size: 0.1em;을 .bbb에 사용하면 의 계산 된 값이됩니다.8px - 그것은 minium보다 이후 및 실제 사용되는 값이 6 픽셀입니다 :

http://linenwoods.com/images/dev.png

This 버그 리포트는 약간 관련이 있지만, 더 큰 뭔가를 최소 글꼴 크기 설정을 변경 제안, 수행을 압박하여, Chrome을 사용하기 전에 once이 -webkit-text-size-adjust: none;으로이 문제를 해결할 수 있다고 언급했으나 (버전 27에서는 사용되지 않음)) This, 약간 최근의 질문은 비슷한 해결책을 찾고 있지만 아직 답을 찾지 못했습니다.

출처

2014-01-14 19:08:00 412

이것은 뭔가입니다! 그러나 Phlume이 대답 한 후에 나는'.aaa '의 글꼴 크기를 픽셀 ("0.1rem"대신 "12px")을 사용하여 설정하려고 시도했으며 도움이되었습니다. '.bbb'의 계산 된 크기는 이제'1px'입니다 ...이 바이올린을 확인하십시오 : http://jsfiddle.net/rapik/j72aZ/5/ – Andrej

@Andrej :'.bbb'의 계산 된 스타일은 여전히 6px를 보여줍니다 나를 위해 (그 바이올린에). – 412

흥미 롭습니다. 나는 다시 확인했고'.bbb'에 대해 "1px"를 보았습니다 (Win Server 2012에서는 Chrome 31.0.1650.63m). 작은 녹색 상자 (15x15 픽셀) 또는 큰 상자가 있습니까? – Andrej

412는 설명했듯이 크롬 최소 글꼴 크기가 6px인데, 글꼴 크기가 em 또는 으로 지정된 경우에만이 글꼴 크기가 적용됩니다. 이 제한을 수락하거나 회피 할 수 있습니다.

1 개 EM = 16px (즉, 대부분의 브라우저), 당신은 같은 규칙을 사용하여 생각 할 때 1 x 1 픽셀의 루트 글꼴 크기를 대상으로하는 말 :

내가 이전에했던 것처럼

html { font-size: 0.0625em } 
.myElem { height: 20em; font-size: 12em; }

(논리가되고 당신의 글꼴 높이에 따라 컨테이너 높이를 조정해야 함). Chrome에서는 여기 font-size이 예상대로 12 * 1px = 12px으로 간주되지만 높이는 6px의 최소 글꼴 크기를 사용하여 20 * 6px = 300px으로 계산됩니다. 물론 이는 바람직하지 않습니다. 이 em/rem, 최소 글꼴 크기 대신 픽셀에서의 단으로, 1px1 em = 16px에

이

html { font-size: calc(1em/16); } 
.myElem { height: 20em; font-size: 12em; }

루트 요소 (<html>) 글꼴 크기는 여전히 계산 :

대신 다음과 같은 방법을 사용할 수 있습니다 6px 규칙이 적용되지 않으며 높이가 20px과 같을 것입니다.

출처

2017-08-07 04:11:15 andrewb

Calc를 사용하는 것이 좋습니다! 감사 – Safareli

Chrome에서 em 단위 사용시 문제

답변

관련 문제