Spaltenanzahl und Position auf Microsoft festen Rand

Question

Auf einem aktuellen Projekt, das ich eine ähnliche Struktur haben (hier habe ich sehr vereinfacht die Struktur):

http://jsfiddle.net/6j5ouhz4/3/

HTML

<div class="container"> 
    <div class="columns"> 

    <div class="column1"> 
     <div class="openFlexbox"> OPEN </div> 
     <div class="flexbox">TEST 
      <span class="close">X</span> 
     </div> 
    </div> 


    <div class="column1"> 
     <div class="openFlexbox"> OPEN </div> 
     <div class="flexbox">TEST 
      <span class="close">X</span> 
     </div> 
    </div> 

    <div class="column1"> 
     <div class="openFlexbox"> OPEN </div> 
     <div class="flexbox">TEST 
      <span class="close">X</span> 
     </div> 
    </div> 

    <div class="column1"> 
     <div class="openFlexbox"> OPEN </div> 
     <div class="flexbox">TEST 
      <span class="close">X</span> 
     </div> 
    </div> 

    </div> 
</div> 

CSS

.container { 
     border:1px solid black; 
     width:600px; 
     min-height:200px; 
     margin: 0 auto; 
     background: #ddd; 
     display:flex; 
     display: -ms-flexbox; 
    } 
    .columns { 
     column-gap: 8em; 
     column-count: 2; 
    } 
    .column1 { 
     display: block; 
     border:1px solid red; 
     width:200px; 
     height: 200px; 
     margin:10px; 
     position:relative; 
    } 
    .flexbox { 
     display:none; 
     position: fixed; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%; 
     background: #aaa; 
     font-size:30px; 
     text-align:center; 
     z-index: 9999 
    } 
    .flexbox.open { 
     display:block; 
    } 

    .close { 
     border:1px solid #fff; 
     padding: 5px; 
    } 
    .openFlexbox { 
     background: #a6dbea; 
     padding: 10px 0; 
     text-align:center; 
     display:inline-block; 
     position:absolute; 
     width: 100px; 
     left: 50%; 
     margin-left:-50px; 
     top: 40%; 
    } 

JS

jQuery('.openFlexbox').on('click',function(e) { 
    jQuery(this).next('.flexbox').addClass('open'); 
}); 

jQuery('.close').on('click',function() { 
    jQuery('.flexbox').removeClass('open'); 
}); 

Firefox und Chrome keine Probleme haben, auf Microsoft Rand der modalbox „Halfsize“ erscheinen die Hälfte der Fläche der Kolonne einnimmt, wo dieser Block (in diesem Beispiel anstelle befindet, ist es tut gar nicht erscheinen).

Eigentlich, durch das Entfernen der relativen Position, verschwindet das Problem, aber die "Position: relativ" Ich benutze, um die Schaltfläche zu zentrieren. aber die relative Position sollte nicht die festen Positionen beeinflussen.

Es gibt eine Lösung für dieses Problem?

Answer 1

Die 'openflexbox' deckt nicht den gesamten Bereich ab, aber vielleicht würde dies für Sie funktionieren?

css:

.flexbox { 
    display:none; 
    /*position: fixed;*/ 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: #aaa; 
    font-size:30px; 
    text-align:center; 
    z-index: 9999; 
} 

js:

jQuery('.openFlexbox').on('click',function(e) { 
    jQuery(this).next('.flexbox').addClass('open'); 
    $('.openFlexbox').css('display', 'none'); 
}); 

jQuery('.close').on('click',function() { 
    jQuery('.flexbox').removeClass('open'); 
    $('.openFlexbox').css('display', 'inline-block'); 
});