Bootstrap 模态样式的位置固定关闭按钮在 Internet Explorer 中显示不正确

Question

我在一个使用 Bootstrap 3.0.2 版本的网站上工作。我设计了一个模态关闭按钮，它在除 Internet Explorer 之外的所有浏览器中都能正确显示（我已经在 ie 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 修复此问题？

注意： 由于某些原因我无法升级 bootstrap 版本：/

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>

Bootstrap 模态样式的位置固定关闭按钮在 Internet Explorer 中显示不正确

Position fixed close button of Bootstrap modal styling is not displaying properly at internet explorer

css

bootstrap-modal

twitter-bootstrap-3