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

问题描述：

我正在使用 Bootstrap 3.0.2 版本的网站上工作.我设置了一个模式关闭按钮的样式，该按钮在除Internet Explorer之外的所有浏览器中都能正确显示(我已经在ie 11处进行了检查).基本上，使它看起来像这样，

I am working on a website which used Bootstrap 3.0.2 version. I have styled a modal close button which displayed properly in all browsers except internet explorer (I have checked at ie 11). Basically, to make it look like this,

我使用了以下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;时，由于顶部和右侧值为负，因此无法显示其一半.截图:

The reason behind using position: fixed; instead of position: absolute; was wired. At the time of using position: absolute; it could not show it's half portion due to negative top and right value. screenshot:

这就是为什么，我使用了position:fixed;在每种浏览器上都可以完美运行.但是，Internet Explorer会以这种方式显示此交叉按钮:

That's why, I used position: fixed; which worked perfectly at every browsers. But, internet explorer is displaying this cross button like this way:

如何为Internet Explorer解决此问题?

How can I fix this for internet explorer?

注意:由于某些原因，我无法升级引导程序版本:/

Note: it's not possible for me to upgrade the bootstrap version for some reason :/

提琴作品

答

.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中无法正确显示

相关推荐