2013-05-06 1 views
1

나는 CSS에서 어떻게 작동해야하는지에 대한 이해가 어려워요. 글꼴 (font)과 동일한 방식으로 요소 (이 경우 div)를 가져 오려고합니다. 내가 할 수있는 한 내 문제 진술을 축소했다. 내가 몸 {글꼴 크기 변경할 때글꼴을 사용하여 VS 폭

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style> 
     body { font-size: 100%; } 
     .EventReg { 
     border:solid #000000 .063em; 
     background-color:#000000; 
     padding:.625em; 
     width:13.65em; 
     } 
    </style> 
    </head> 
    <body> 
    <div style="font-size:2em;">Event Registration</div> 
    <div class="EventReg"></div> 
    </body> 
</html> 

이것은 IE, FF, 그리고 크롬에서 제대로 확장 할 것 : 100 %; }을 다른 퍼센트로.

내가 기대하는 바는 컴퓨터 브라우저에서 div와 텍스트가 정확히 같은 길이라는 것입니다. 그러나, 내 안드로이드 스마트 폰으로 이것을 확인하면 텍스트가 div보다 약간 넓습니다.

크기가 조정 되어도 텍스트 아래의 div가 텍스트와 동일한 너비가 될 것으로 예상됩니다.

어떤 생각이 잘못되었거나 내 가정이 잘못 되었습니까?

+0

[이 게시물을보십시오 (http://stackoverflow.com/questions/16288813/responsive-css-ems-wont-resize-lower-than-0-5em/16289640#16289640), 나는 그것을 대답했다. 며칠 전에, 그리고 정확히 당신이 알고 싶어하는 것입니다. 간단히 말해서, 픽셀 글꼴 크기를 먼저 지정하지 않으면 '안에'의 결과는 예측하기 쉽지 않습니다. – Tyblitz

+0

나는 운없이 다음을 시도했다 : ** html {font-size : 16pt; }, html {글꼴 크기 : 16px; }, body {font-size : 16pt; }, body {font-size : 16px; } **. 이것은 컴퓨터 브라우저에서는 올바르게 조정되지만 전화기에서는 올바르게 조정되지 않습니다. – lurch3777

+0

That sucks ...이 경우 나는이 문제에 대한 해결책에 정말로 관심이있다. ... – Tyblitz

답변

0

텍스트를 이미지로 만들어이 문제를 해결했습니다. 이것은 나를위한 이상적인 해결책은 아니지만 텍스트를 모든 장치와 브라우저에서 동일하게 만듭니다.

0

속성은 -webkit-text-size-adjust 속성과 관련이있을 수 있습니다. CSS에 다음 스타일을 추가하십시오.

* { 
    -webkit-text-size-adjust:100%; 
} 

일부 휴대 전화에서는 브라우저가 웹 사이트를보다 쉽게 ​​읽을 수 있도록 글꼴 크기를 조정합니다. 이 속성을 100 % (또는 가능하면 none)로 설정하면 문제가 발생하지 않습니다.

+0

나는 webkit-text-size-adjust : 100 % **와 ** - webkit- text-size-adjust : none; ** 그러나 결과는 변경되지 않습니다. 감사. – lurch3777

+0

그럴 경우 Jukka의 대답이 도움이 될 것 같습니다. 기본 글꼴이 다르기 때문에 데스크톱 브라우저와 모바일간에 결과가 달라질 수 있습니다. 글꼴을 명시 적으로 Arial과 같은 일반적인 것으로 설정하면 더 나은 결과를 얻을 수 있지만 그다지 보장 할 수는 없습니다. –

0

텍스트와 빈 div 요소의 너비가 같을 것으로 예상 할 이유가 없습니다. 텍스트의 너비는 글꼴에 따라 다르며 글꼴 렌더링 기능 (예 : 자간)에도 어느 정도 영향을받습니다. 빈 div 요소의 너비는 em 단위를 사용하여 명시 적으로 설정됩니다. The em unit은 글꼴의 크기, 즉 글꼴의 높이입니다. 글자의 너비 나 높이에 정의 된 관계가 없습니다.

요소의 너비를 다른 요소의 텍스트 너비에 맞추려면 표 서식 지정이나 다른 레이아웃 도구가 필요합니다. 이 경우 텍스트 아래에 단색 직사각형 만 있으면 예 : display: inline-block이고 해당 텍스트가 들어있는 요소에 대해 border-bottom이 적합합니다.