css/Ít calc() phương pháp đang rơi IE10 của tôi

Question

Tôi đang cố gắng để có được một chiều cao trong một div được chính xác ít hơn 55px sau đó div cha mẹ.

tôi đã cố gắng để làm điều này: height: calc(~"100% - 55px"); trong ít mà tạo ra này: height: calc(100% - 55px);

này hoạt động tốt trong Chrome và Firefox, nhưng tai nạn trên IE10.

Nó không phải là nó không hoạt động nhưng nó bị treo. Điều này là rất lạ tôi đã cố gắng để tìm thấy một số thông tin trên đường nhưng không thể nhìn thấy bất cứ điều gì.

Ngoài ra, điều này chỉ xảy ra với chiều cao. Nếu tôi đã sử dụng phương pháp calc() trên chiều rộng nó chạy tốt.

Bất kỳ ý tưởng nào về cách tôi có thể truy cập phần dưới của điều này?

Answer 1

Tôi đã tìm thấy sự cố. Có một chiều cao: kế thừa bên trong một trong những div bên trong. Rõ ràng IE bị siêu bối rối về điều này vì giá trị được tính toán và dường như không thể kế thừa. Tất cả đều tốt.

Vì vậy, nói cách khác bạn không có thể làm một cái gì đó như thế này:

<div style="height:100%"> 
    <div style="height: calc(100% - 50px)"> 
    <div style="height:inherit"> 
    </div> 
    </div> 
</div> 

nếu bạn IE10 sẽ sụp đổ, đây là một ví dụ: http://jsfiddle.net/wyRXp/1/

đây tôi lấy ra chiều cao kế thừa : http://jsfiddle.net/wyRXp/2/ và hoạt động tốt.

Cả hai mẫu trên đều hoạt động tốt trong Firefox và Chrome

Answer 2

Có một vấn đề được biết đến với calc() trong IE10

Internet Explorer (theo spec) không chấp nhận tính toán mà không cần không gian cho bổ sung/bớt (ví dụ. Calc (100% -30px) là không hợp lệ, nhưng calc (100% - 30px) hoạt động tốt).

Tham khảo CanIUse.com.

Lý do có thể xảy ra nhất cho sự cố của bạn là Ít hơn sẽ xóa khoảng trắng khi thoát giá trị.