在iOS9上，CSS规则不能正常工作。

Question

在iOS9上，CSS规则不能正常工作。

cssios9

5

我在iOS9上遇到了一个与网站CSS相关的问题。这些CSS规则在Android和iOS8上运行良好，但在iOS9上，网站出现了混乱。以下是iOS8和iOS9之间的差异。

我可以帮您进行翻译。以下是需要翻译的内容：

可能出现了什么问题？如何解决？谢谢您的帮助。

CSS：

section.destinations {
    float: left;
    width: 82.5%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    font-weight: 300;
    font-size: 1.25em;
}
.content-wrap {
    position: relative;
    border-radius: 5px;
}
.content-wrap section {
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
    display: block;
}
.destinations .promo {
    position: relative;
    background: #fff;
    webkit-box-shadow: 0 0 2px rgba(0,0,0,1);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,1);
    box-shadow: 0 0 2px rgba(0,0,0,1);
    float: left;
    width: 23%;
    margin: 0 2.6% 20px 0;
    font-size: 10px;
    text-align: left;
    display: block;
}
@media screen and (max-width: 600px){
    section.destinations {
        width: 100%;
    }
}
@media screen and (max-width: 410px){
    .full .one-fourth {
        width: 100%!important;
        margin: 0 auto 15px!important;
     }
}

HTML：

<section class="destinations clearfix full tabs tabs-style-tzoid">
    <div class="content-wrap">
        <section id="section-tzoid-1" class="content-current">
           <!--column-->
            <article class="one-fourth promo" style="">

            </article>
            <!--//column-->
           <!--column-->
            <article class="one-fourth promo" style="">

            </article>
            <!--//column-->
            <div class="clearfix"></div>
        </section>
    </div>
</section>

- MtMy

1

一种常见的调试方法是逐个删除规则，直到找到造成影响的那个。 - user663031

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Imagesthataspire · Accepted Answer

您遇到了IOS9在Web环境中的一个主要问题之一。IOS9不支持任何媒体查询。

如果您的类存在于特定屏幕尺寸的媒体查询中，则它们将无法被读取，您的CSS和输出将在所有设备上看起来都与当前在IOS9上看起来相同。该问题已经被报告，但是苹果目前还没有发布更新版本的时间表来解决这个问题。

在我的网站上，我使用了一个小于1920像素的媒体查询类的display:none;警报，它只会在IOS9设备上显示，并且只会在问题解决之前显示。

/* Device Alert (all screen, < 1920px only)*/
@media screen and (max-width: 1920px) {

<style>
.alert {
display:none;
}
</style>
}

<div class="alert">
IOS9 has caused display issues with this site. Please access the site on another platform until an update is issued.
</div>

基本上，如果媒体查询被接受，则显示：none；如果媒体查询未被接受，则显示警报。

希望这暂时对您有所帮助。