CSS Fluid Center Positionierung Problem in IE

Question

Ich habe ein Problem in IE (11 & früher) mit einem Fluid-Layout. Grundsätzlich breiten sich die Bilder zu den entfernten Seiten aus, anstatt sie so zu zentrieren, wie sie sollten. Dies funktioniert in anderen Browsern einwandfrei.

Ich verwende den folgenden Code ein:

HTML:

<h2 style="text-align: center;"></h2> 
    <div class="newRange"> 
    <h3 style="text-align: center;">Little Recipes</h3> 

     <div class="rangeWrapper"> 
     <div class="rangeModern"> 
      <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/shabby-chic/">Shabby Chic</a></strong><a href="http://harlijaigo.co.uk/index.php/product/shabby-chic/"></a></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/6-Nylah-2shabby200.jpg" alt="6-Nylah 2shabby200" width="200" height="289" /></a><p>3 Colour Options, 5 Outfit Choices 
    Price Range £15.95-£18.95</p> 
    <!--Yellow Blue Pink--> 

      </div> 
     <div class="rangeModern"> 
    <h3 style="text-align: center;"></h3> 
    <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/">Classic Vintage</a></strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/1-Thomas-Vintage-200.jpg" alt="1-Thomas Vintage 200" width="200" height="289" /></a><p>3 Colour Options, 5 Outfit Choices 
    Price Range £15.95-£18.95</p> 
    <!--Yellow/Purple Orange/Green Blue/Red --> 

    </div> 
    <div class="rangeModern"> 
    <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/hand-written-memo/">Memo</a></strong><a href="http://harlijaigo.co.uk/index.php/product/hand-written-memo/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/5-Emily-Memo-200.jpg" alt="5-Emily Memo 200" width="200" height="289" /></a><p>2 Colour Options, 5 Outfit Choices 
    Price Range £15.95-£18.95</p> 
    <!-- Black/White Black/White with a splash of colour --> 

    </div> 
    <span class="stretch"></span> 
    </div> 
    </div> 
    <div class="newRange"> 
    <h3 style="text-align: center;">Newborn Welcome</h3> 
    <div class="rangeWrapper"> 
    <div class="rangeModern"> 
    <h3 style="text-align: center;"></h3> 
    <p style="text-align: center;"><strong>Footprints</strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/1-Thomas-Vintage-200.jpg" alt="1-Thomas Vintage 200" width="200" height="289" /></a><p>3 Colour Options, 2 Outfit Choices 
    Price Range £15.95-£16.95</p> 

    </div> 
    <div class="rangeModern"> 
    <p style="text-align: center;"><strong>Delivery Stork</strong><a href="http://harlijaigo.co.uk/index.php/product/hand-written-memo/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/5-Emily-Memo-200.jpg" alt="5-Emily Memo 200" width="200" height="289" /></a><p>3 Colour Options, 2 Outfit Choices 
    Price Range £15.95-£16.95</p> 

    </div> 
    <span class="stretch"></span> 
    </div> 
    </div> 
    <div class="newRange"> 
    <h3 style="text-align: center;">Summer Range</h3> 
    <div class="rangeWrapper"> 
    <div class="rangeModern"> 
    <h3 style="text-align: center;"></h3> 
    <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/">Classic Vintage</a></strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/1-Thomas-Vintage-200.jpg" alt="1-Thomas Vintage 200" width="200" height="289" /></a><p>Yellow/Purple 
    Orange/Green 
    Blue/Red</p> 

    </div> 
    <span class="stretch"></span> 
    </div> 
    </div> 

CSS:

.newRange 
{ 
width:100%; 
} 

.rangeWrapper { 
     text-align: center; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

.rangeModern { 
    width:200px; 
    height:480px; 
    margin:10px; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 

} 

.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 

Bitte sehen diese JSFiddle:

https://jsfiddle.net/afnguyen/qzzrkc4w/1/

Jede Hilfe wäre sehr geschätzt.

Answer 1

ok stolperte über die Lösung beim Inspizieren Element in IE und Editieren der CSS. Durch das Entfernen der folgende:

.rangeWrapper { 
     text-align: center; 
    /*-ms-text-justify: distribute-all-lines; REMOVED THESE TWO LINES 
    text-justify: distribute-all-lines;*/ 
} 

Es funktioniert jetzt in allen Browsern, einschließlich Internet Explorer und auf verschiedenen Geräten