IEでのCSS流体センターの配置問題

Question

流体レイアウトでIE（11 &）に問題があります。基本的に、イメージは、必要なときにセンタリングするのではなく、遠方に広がります。これは他のブラウザでうまく動作します。

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 
} 

見てください、このJSFiddle：

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

私は、次のコードを使用しています

どんな助けでも大いに評価されるでしょう。

Answer 1

ok IEの要素を調べてCSSを編集している間、解決策を見つけました。以下を除去することにより：

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

今はIEなどのブラウザ間やデバイス

間で動作します