-1

在ie8中,文檔按預期呈現。 ie8 screenshotIE 7/8渲染問題?

在IE7中,該文件是不是 ie7 screenshot

(建在額外的CSS引導的頂部)

標記:

.modal.fade.in#unsupported-browser-modal 
    .modal-dialog 
    .modal-content 
     .modal-text 
     .modal-header 
      %h3.modal-title YOUR BROWSER IS OUT OF DATE 
     .modal-body 
      This website requires a minimum of Internet Explorer version 9 or the latest version of other popular web browsers. 

額外的CSS:

#unsupported-browser-modal { 

    .modal-dialog, .modal-content { 
    height: 100%; 
    } 

    .modal-dialog { 
    width: 100%; 
    margin: 0; 
    max-width: none; 
    min-width: none; 
    } 

    .modal-content { 
    border-bottom: 0; 
    } 

    .modal-header { 
    border-bottom: 0; 
    padding: 15px; 
    min-height: 16.42857143px; 
    } 

    .modal-title { 
     font-family : $var; 
     text-align  : center; 
     font-weight : bold; 
     letter-spacing : 2px; 
     margin-top: 50px; 
    } 

    .modal-body { 
    font-family: $var1; 
    font-size: 14px; 
    text-align: center; 
    padding: 2px 35px 80px; 
    color: #646464; 
    line-height: 20px; 
    } 
} 

#unsupported-browser-modal.modal { 
    display: block; 
} 

.modal-text { 
    top: 37%; 
    position: relative; 
} 

另外,document.compatMode似乎在ie7以及i8中設置爲相同的值,以防可能感興趣。

關於我可能沒有考慮到的想法?

+0

投擲標記/ CSS:

_margin-top: 100px; /* ie7 only */ 

可以的,如果你有興趣在這裏閱讀更多關於安全CSS黑客。 –

+0

http://codepen.io/ahcarpenter/pen/oXgQdP @MathiasaurusRex也,謝謝你一看! – Drew

+0

嘗試添加'html,body {height:100%;保證金:0; }'。 http://codepen.io/anon/pen/eNmQbG –

回答