Bootstrap模式造型的位置固定關閉按鈕在Internet Explorer中無法正常顯示

Question

我正在使用的網站上使用Bootstrap 3.0.2版本。我已經設計了一個模式關閉按鈕，可以在所有瀏覽器中正確顯示，除了Internet Explorer（我已經在11上進行了檢查）。基本上，使它看起來像這樣，

我已經使用這個CSS：

.modal-header .close { 
    position: fixed; 
    top: -10px; 
    right: -10px; 
    width: 23px; 
    height: 23px; 
    opacity: 1; 
    z-index: 10; 
} 

背後使用的position: fixed;代替position: absolute;是有線的原因。在使用position: absolute;時，由於負值和負值，它無法顯示它的一半。截圖：

這就是爲什麼我使用的位置是：固定;在任何瀏覽器上都能完美運行。但是，Internet Explorer中顯示此十字按鈕像這樣：

我怎樣才能解決這個問題的Internet Explorer？

注：這不是我能夠升級由於某種原因，引導版本：/

Fiddle Work

Answer 1

.modal { 
 
    overflow: inherit; 
 
    overflow-y: inherit; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 

 
.modal:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    margin-right: -4px; 
 
} 
 

 
.modal-dialog { 
 
    max-width: 500px; 
 
    padding: 0; 
 
    display: inline-block; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
} 
 

 
.modal-content { 
 

 
    border: 0; 
 
    border-radius: 0; 
 

 
} 
 

 
.modal-header { 
 
    border: 0; 
 
    padding 0; 
 
    position: relative; 
 
} 
 

 
.modal-header .close { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: -10px; 
 
    right: -10px; 
 
    width: 23px; 
 
    height: 23px; 
 
    border-radius: 23px; 
 
    background-color: #00aeef; 
 
    color: #ffe300; 
 
    font-size: 9px; 
 
    opacity: 1; 
 
    z-index: 10; 
 
} 
 

 
.modal-content p { 
 
    padding: 0 20px; 
 
} 
 

 
.modal-body { 
 
    padding: 0 0 10px 0; 
 
    height: 450px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 

 
     <p> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 

 
     <p> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>