Question

我在IE（11＆amp;更早版本）中遇到流量布局问题。基本上，图像散布到远端而不是按照它们应该居中。这在其他浏览器中工作正常。

我使用以下代码：

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

确定在IE中检查元素并编辑css时偶然发现了解决方案。删除以下内容：

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

它现在适用于包括IE和跨设备的浏览器

IE中的CSS流体中心定位问题

1 个答案: