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

Posted 2023-03-06

【中文标题】Bootstrap 模态样式的位置固定关闭按钮在 Internet Explorer 中未正确显示

【英文标题】：Position fixed close button of Bootstrap modal styling is not displaying properly at internet explorer

【发布时间】：2016-06-14 07:22:38

【问题描述】：

我正在开发一个使用 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; 时，由于顶部和右侧的负值，它无法显示它的一半。截图：

这就是为什么，我使用 position: fixed;在每个浏览器上都能完美运行。但是，Internet Explorer 以这种方式显示这个十字按钮：

如何为 Internet Explorer 解决此问题？

注意：由于某种原因，我无法升级引导版本：/

Fiddle Work

【问题讨论】：

您可能想在我下载和安装 IE 11 时检查一下 (jsfiddle.net/0vLtpsr6/2) :)

谢谢，但我需要溢出：自动； at .modal-content 用于在内容很多时带来滚动条。请检查：jsfiddle.net/learner73/0vLtpsr6/3

【参考方案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>

【讨论】：

谢谢，但我需要溢出：自动； at .modal-content 用于在有很多内容时带来滚动条。请检查：jsfiddle.net/learner73/0vLtpsr6/3

如果你给.modal-body一个overflow和height而不是.modal-content呢？

是的，它更干净。但是，问题是我不能根据设计要求在模态页眉和页脚处使用任何边框。所以，根据这个解决方案，我的最终输出不会像你的那样干净。无论如何，到目前为止，此解决方案很有用。谢谢

另一种解决方案是将关闭按钮放在modal-content 之外。所以他与内容的overflow无关。