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>