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

Question

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,

I have used this CSS:

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

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:

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

How can I fix this for internet explorer?

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

Fiddle Work

Solution

.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>

Comments

[user1896653]

Thanks, but I need overflow: auto; at .modal-content for bringing scrollbar when there is lots of content. Please, check this: jsfiddle.net/learner73/0vLtpsr6/3

[NiZa]

And what if you give .modal-body an overflow and height in stead of .modal-content?

[user1896653]

yes, it's much cleaner. But, the problem is I can't use any border at modal-header & footer according to the design requirement. So, my final output won't be as much cleaner as your's according to this solution. Anyway, this solution is useful so far. Thanks

[NiZa]

An another solution could be to put the close button outside modal-content. So he has nothing to do with the overflow of the content.