IE7 표현식이 표 셀 높이와 일치하지 않습니다.

Question

여러 줄의 텍스트를 세로로 가운데에 맞 춥니 다. 모든 최신 브라우저에서 작동하지만 IE7에서는 작동하지 않습니다. 주위를 검색하고 CSS 트릭에서 CSS 표현을 찾았습니다.

IE7의 요소 높이가 불행히도 107px이 아니므로 더 커집니다. 방금 CSS 표현에 대해 알아 냈고 그에 대한 지식이 거의 없습니다.

누구나 문제와 해결책을 제시 할 수 있습니까?

CSS

p.caption { 
    display: table-cell; 
    height: 107px; 
    padding: 15px 10px; 
    border-bottom: 1px solid #cecece; 
    font-size: 16px; 
    text-shadow: 0 0 1px #868686; 
    text-align: center; 
    vertical-align: middle; 
} 

IE7 CSS

p.caption { 
    clear: expression(
     style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight)/2) + "px" : "0"), 
     style.clear = "none", 0 
    ); 
} 

라이브 예 :JSFiddle

내가 JSFiddle는 IE 식을 지원합니다 생각하지 않아요?

Answer 1

너는 높이를 더하는 것을 필요로한다 : 107px; 'div'하지만 'p'가 아님

div#fullWidth{ 
    display: table; 
    width: 200px; 
    background: #dddddd; 
    height: 107px; 
} 

p.caption{ 
    display: table-cell; 
    padding: 15px 10px; 
    font-size: 16px; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 2

display : table-cell은 IE7에서 지원되지 않습니다. 따라서 수직 정렬은 적용되지 않습니다. 이 참조 :

http://www.kamui.co.uk/2012/01/23/css-display-table-cell-table-row-table-in-ie7/

http://quirksmode.org/css/css2/display.html

이 바이 패스 작동하는 것 같다 (IE7에/8 & FF25 테스트) :

CSS :

div#fullWidth { 
    display: table; 
    width: 200px; 
    background: #dddddd; 
    height: 107px; 
} 

p.caption { 
    display: table-cell; 
    border-bottom: 1px solid #cecece; 
    font-size: 16px; 
    text-shadow: 0 0 1px #868686; 
    text-align: center; 
    vertical-align: middle; 
    _margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0":(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px'); 
} 

HTML :

<div id="fullWidth"> 
    <p class="caption">Testing 1,2,4,5,6,7,8,9,10 1,2,4,5,6,7,8,9,10</p> 
</div> 

는 "_"는 CSS에 (IE9 & (10)에 대한 확실하지 않은) 만 IE에 의해 고려 또 다른 우회입니다. FF, Chrome 및 Opera는이를 무시합니다.

높이에주의하십시오. 상위 요소 크기에 정의됩니다. IE에서 항상 그렇듯이 부모 크기 (또는 너비)가 모두 설정되면 요소 크기가 적용됩니다.

_height: 100%; 
_width: 100%; 

이 유용 할 수 있습니다.