Biểu thức IE7 không bằng chiều cao ô bảng

Question

Tôi đang căn giữa theo chiều dọc văn bản nhiều hàng với mã của tôi. Nó hoạt động trong tất cả các trình duyệt hiện đại, nhưng không hoạt động trong IE7. Tôi tìm kiếm xung quanh và tìm thấy tôi một biểu thức CSS trên CSS-Tricks mà nên sửa chữa nó.

Rất tiếc, chiều cao của phần tử trong IE7 không phải là 107px, nó có vẻ lớn hơn. Tôi chỉ tìm hiểu về các biểu thức CSS và có ít kiến ​​thức về nó.

Ai có thể chỉ ra vấn đề và giải pháp?

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 
    ); 
} 

Sống dụ:JSFiddle

Tôi không nghĩ JSFiddle hỗ trợ các biểu IE?

Answer 1

Bạn cần thêm chiều cao: 107px; thành 'div' nhưng không phải '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: cell table không được hỗ trợ trên IE7. Vì vậy, căn chỉnh dọc không được áp dụng. Thấy có:

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

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

bypass này dường như làm việc (thử nghiệm trên 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> 

"_" trong CSS là một vòng tránh khác chỉ được xem xét bởi IE (không chắc chắn đối với IE9 & 10). FF, Chrome và Opera sẽ bỏ qua nó.

Hãy cẩn thận về chiều cao: nó được xác định trên kích thước phần tử gốc. Như mọi khi trên IE, kích thước phần tử được áp dụng nếu tất cả chiều cao (hoặc chiều rộng) của bố mẹ được đặt.

_height: 100%; 
_width: 100%; 

có thể hữu ích.