Question

我遇到了一个网站区域的问题我正在开发我使用Flexbox进行布局的地方。对于那些使用iOS9设备的人，我很乐意，如果你可以去www.sparkles-cakes-of-art.co.uk并亲眼看到这些问题。有问题的页面是：主页，关于页面和菜单。

Android手机或桌面上不会发生此问题。

如果您没有设备可以直接查看该问题，请参阅以下问题的截图：

Homepage

这是应该影响它的CSS

.flex {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.half {
  -webkit-box-flex: 50%;
      -ms-flex: 50%;
          flex: 50%;
}

.cake-images {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin:20px 0px;
}

主页问题的相关HTML。如果我能找出问题所在，我应该能够找出其他页面：

<section class="flex">
        <article class="half">
          <p>blah!</p>
        </article>
        <blockquote class="half main-quote">
          <img src="img/quote-in.png" class="quote-in"/>
          <p class="quote">blah</p>
          <cite class="cite">blah</cite>
          <img src="img/quote-out.png" class="quote-out"/>
        </blockquote>
</section>
<section class="flex cake-images">
        <div class="main-cake-img">
          <div class="hidden-hover">
            <h2>Weddings</h2>
          </div>
          <a href="gallery#weddings">
            <img src="img/cake-01.png" alt="" />
          </a>
        </div>
        <div class="main-cake-img">
          <div class="hidden-hover">
            <h2>Birthdays</h2>
          </div>
          <a href="gallery#birthdays">
            <img src="img/cake-02.png" alt="" />
          </a>
        </div>
        <div class="main-cake-img">
          <div class="hidden-hover">
            <h2>Simplicity Offer</h2>
          </div>
          <a href="gallery#offer">
            <img src="img/cake-03.png" alt="" />
          </a>
        </div>
  </section>

抱歉，由于代表限制，我无法发布更多屏幕截图。

Answer 1

发现了这个问题。

在电话设备的媒体查询中，我有这个：

var data = [];
var cities = _.flatMap(data, mapCountries);

function mapCountries(country){
   return _.flatMap(country.states, mapStates).map(setAttr('country', country.countryname));
}

function mapStates(state){
   return state.cities.map(setAttr('state', state.statename));
}

function setAttr(key, value){

  return function(obj){
     obj[key] = value;
     return obj;
  }
}

我认为这会使元素达到100％宽度，以便只有1列。这将在iOS Safari上中断。而是使用.half { flex: 100%; }来达到同样的效果。

iOS 9.3.5 Flexbox重叠内容问题？

1 个答案: