Position fixed close button of Bootstrap modal styling is not displaying properly at internet explorer
<p>I am working on a website which used <strong>Bootstrap 3.0.2</strong> 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,</p>

<p><img src="https://i.imgur.com/js6hFUG.png"></p>

<p>I have used this CSS:</p>

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

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

<p><img src="https://i.imgur.com/NqzX9LX.png"></p>

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

<p><img src="https://i.imgur.com/vJHrRrD.png"></p>

<p>How can I fix this for internet explorer?</p>

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

<p><a href="https://jsfiddle.net/learner73/0vLtpsr6/1/" rel="nofollow noreferrer">Fiddle Work</a></p>