Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
iOS 9.3.5与Flexbox内容重叠的问题? 我有一个网站的问题,我在开发的中间,我已经使用了Frasbox的布局。对于那些使用iOS9设备的人,我希望你能亲自去看看这些问题。有问题的页面包括:主页、关于页面和菜单_Ios_Css_Flexbox - Fatal编程技术网

iOS 9.3.5与Flexbox内容重叠的问题? 我有一个网站的问题,我在开发的中间,我已经使用了Frasbox的布局。对于那些使用iOS9设备的人,我希望你能亲自去看看这些问题。有问题的页面包括:主页、关于页面和菜单

iOS 9.3.5与Flexbox内容重叠的问题? 我有一个网站的问题,我在开发的中间,我已经使用了Frasbox的布局。对于那些使用iOS9设备的人,我希望你能亲自去看看这些问题。有问题的页面包括:主页、关于页面和菜单,ios,css,flexbox,Ios,Css,Flexbox,这个问题不会发生在Android手机或桌面上 如果您没有设备直接查看,以下是一些问题的屏幕截图: 下面是应该影响它的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: j

这个问题不会发生在Android手机或桌面上

如果您没有设备直接查看,以下是一些问题的屏幕截图:

下面是应该影响它的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>

生日
简单性优惠
很抱歉,由于代表人数限制,我无法发布更多屏幕截图。

发现问题

在电话设备的媒体查询中,我有以下内容:

.half {
  flex: 100%;
}
我认为这会使元素变为100%宽度,因此只有一列。这将在iOS Safari上中断。而是使用
flex:0以达到相同的效果。

发现问题

在电话设备的媒体查询中,我有以下内容:

.half {
  flex: 100%;
}

我认为这会使元素变为100%宽度,因此只有一列。这将在iOS Safari上中断。而是使用
flex:0
达到同样的效果。

这让我找到了正确的答案,对我来说,这就是将
flex:10%
更改为
flex:10px
。出于某种原因,iOS 9在最后的
0%
时会犹豫,这很烦人,因为我使用
0%
正是因为。这让我找到了正确的答案,对我来说,这就是将
flex:10%
更改为
flex:10px
。出于某种原因,iOS 9在最后的
0%
时会犹豫,这很烦人,因为我使用
0%
正是因为这样。