글꼴 백분율을 역전시키는 방법

Question

글꼴 크기 백분율 증가를 어떻게 반전합니까? 글꼴 크기가 125 % 증가한 경우 글꼴 크기를 80 % (100/125 = 0.8)로 설정해야한다고 생각했을 것입니다.

그러나이 예제에서는 결과 글꼴 em 크기가 너비를 만들려면 작동하지 않습니다. 왜?

fiddle.

는 HTML :

는

<div id="base"> 
    <div id="row1"> 
     <input type="text" /> 
    </div> 
    <div id="row2"> 
     <input type="text" /> 
    </div>  
</div> 

CSS :이 실제로 의도 한대로 작동

#row2 { 
    font-size: 125%; 
} 

#row2 input { 
    font-size: 80%; 
} 

input { 
    background-color: #343434; 
    width: 10em; 
} 

Answer 1

일반적으로 당신은 font-size:125%을 반대합니다 font-size:80%를 사용하여 올바른 것입니다. 그러나 input 태그는 기본값 인 font-size이 대부분의 요소처럼 상속되지 않으므로 부모로부터 상속받지 않습니다. 폰트 크기를 '역전'하고 다시 정상으로 설정하려면 font-size:80%으로 설정하지 마십시오. 그것이 어떻게 작동하는지

는 희망이 예제는 설명합니다 :

jsFiddle

HTML

test 
<div id="base"> 
    <div id="row1"> 
     test <input type="text" value="test" /> 
    </div> 
    <div id="row2"> 
     test<input type="text" value="test" /> 
    </div>  
</div> 

CSS

,536,

#row2 { 
    font-size: 125%; 
} 
#row2 input:first-child { 
    font-size: 80%; 
}  
.eighty-percent { 
    font-size:80%; 
} 
input { 
    width: 10em; 
} 

Answer 2

, 그것은 #row2의 글꼴 크기는 기본적으로 16px하지만 <input> 것이 유일한 13px입니다되는 단지이다. 16px의 125 %는 20px입니다. #row2 input에 규칙을 지정하면 실제로 <input>에 해당 계산의 상위 글꼴 크기가 상속됩니다. 20의 80 %가 16이므로 더 커 보인다. 입력의 글꼴 크기는 기본적으로 상속되지 않습니다. 해당 입력에서 font-size 규칙을 완전히 제거하면 문제를 해결할 수 있습니다.

http://jsfiddle.net/RgQeE/6/