브라우저에서 DIV 높이를 계산하는 방법은 무엇입니까?

내가 페이지를 코드는 다음과 같습니다브라우저에서 DIV 높이를 계산하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <style> 
     body { 
      font-size: 0.625em; 
     } 
     .outer { 
      cursor: pointer; 
     } 
     .text { 
      display: table-cell; 
      vertical-align: middle; 
      height: 16px; 
     } 
     .text-wrapper { 
      display: inline-block; 
     } 
    </style> 
</head> 
<body> 
<div class="outer"> 
    <div class="text-wrapper"> 
     <div class="text">Search Now</div> 
    </div> 
</div> 
</body> 
</html>

내가 크롬과 파이어 폭스에서이 페이지

을 확인하고 외부 DIV의 높이가 16px을 것이라고 나는 asume. Chrome에서는 외부 div의 높이가 19px이고 Firefox에서는 외부 div의 높이가 20px입니다 (브라우저의 계산 된 상자 모델보기에서 볼 수 있음).

이제 브라우저가 어떻게 외부 div의 높이를 계산하는지 알고 싶습니까?

출처

2014-09-02 woodslee

대답에 display:inline-block을 사용할 수 있습니다 CSS 사양의 일부에 대한 길고 복잡한 의역입니다. 이것은 너무 광범위 할 수 있습니다. 실제로 훨씬 더 구체적인 질문이있는 것 같지만 명시 적으로 묻지는 않습니다. –

.text에서 table-cell을 사용하고 있기 때문에 테두리가 분리되어 높이가 높아진 것 같습니다.

그냥 설정 테두리 바깥 DIV 붕괴한다 : 또는

.outer { 
    cursor: pointer; 
    border-collapse: collapse; 
    display: table; 
}

, 당신은 단지 것 묻는 일반적인 질문에 대한 .text

.text { 
    display: inline-block; 
    vertical-align: middle; 
    height: 16px; 
}

출처

2014-09-02 03:59:01

대체 솔루션은 작동하지만 첫 번째 요소는 작동하지 않습니다. 단, 중간 요소를 추가로 행으로 만들지 않는 한'.text-wrapper { display : table-row;}'가됩니다. –

브라우저에서 DIV 높이를 계산하는 방법은 무엇입니까?

답변

관련 문제