html - CSS 在桌面和 android 上的 chrome 上运行良好，但在 safari 上不起作用

Question

所以我有一个网站，我为其定义了 style.css 和响应式 CSS。CSS 在笔记本电脑和 android 的 chrome 上运行良好，但在 safari 中有点混乱 主要问题是该部分中的背景图像，即 1.webp 在 android 和桌面 chrome 和 firefox 中完美显示，但在 safari 中没有这样做。有人说，因为没有设置分辨率，所以这就是 safari 搞砸的原因。我想要专家的意见。请帮帮我

<section class="whatwe" id="register" style="background: url(img/1.webp) no-repeat fixed center center/cover;">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <div class="wedoContent">
                    <h2 class="lead color_white">Get Your Tickets</h2>
                    <!--a href="/form/register.html" id="rzp" class="bes_button" target="_blank">Register Now</a-->
                    <div id="wrapper">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="circle c1 img-circle">
                                        <h4 class="grey">Bennett University</h4>
                                        <br>
                                        <!--span class="icon blue"><i class="fa fa-eur"></i></span-->
                                        <span class="price-large">1249</span>
                                        <!--span class="price-small">90</span-->
                                        <!--button type="button" class="btn btn-info">Choose</button-->
                                    </div>
                                </div>
                                <!-- .Col-md-3 ends here -->
                                <div class="col-md-3">
                                    <div class="circle c2 img-circle">
                                        <h4 class="red">Early Bird</h4>
                                        <br>
                                        <!--span class="icon yellow"><i class="fa fa-eur"></i></span-->
                                        <span class="price-large red">999</span>
                                        <!--span class="price-small">90</span-->
                                        <!--a href="form/early_bird.html" id="rzp" class="bes_button"
                                            target="_blank">Register</a-->
                                        <h4 class="red"> Coming Soon</h4>
                                        <!--button type="button" class="btn btn-warning">Choose</button-->
                                    </div>
                                </div>
                                <!-- .Col-md-3 ends here -->
                                <div class="col-md-3">
                                    <div class="circle c3 img-circle">
                                        <h4 class="grey">Gen Pop</h4>
                                        <br>
                                        <!--span class="icon green"><i class="fa fa-eur"></i></span-->
                                        <span class="price-large grey">1499</span>
                                        <br>
                                        <!--button type="button" class="btn btn-success">Choose</button-->
                                    </div>
                                </div>
                                <!-- .Col-md-3 ends here -->
                                <!--div class="col-md-3">
                                    <div class="circle c4 img-circle">
                                        <h4 class="red">Deluxe Plan</h4>
                                        <span class="icon red"><i class="fa fa-eur"></i></span>
                                        <span class="price-large red">8,</span>
                                        <span class="price-small">90</span>
                                        <p>Great for small Business</p>
                                        <button type="button" class="btn btn-danger">Choose</button>
                                    </div>
                                    </div-->
                                <!-- .Col-md-3 ends here -->
                            </div>
                            <!-- .Container ends here -->
                        </div>
                        <!-- .Row ends here -->
                    </div>
                    <div class="mouseSlider" style="margin-top:200px;">
                        <a href="#about" class="normal"><img src="img/mouse.png" alt=""></a>
                        <a href="#about" class="hover"><img src="img/mouseh.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

这是CSS：

    .whatwe{
        height: -webkit-fill-available;;
    }
    .wedoContent{
        padding-top: 36vh;
    }
    .wedoContent h5 {
        margin-bottom: 39px;
    }
    .wedoContent h2{
        margin-bottom: 29px;
    }
@charset "utf-8";

    * {
    padding:0; 
    margin:0; 
    border:0;
}
body {
   background: #d5d5d5;
    font-family:trebuchet MS;
    color:#6B6B6B;
   border: 0 none;
   margin: 0;
    font-size:13px;
   padding: 0;
}
#wrapper{
  padding: 60px 0px;
  margin-left: 50px;
}
.container{}
.row{}
.circle{
  background: #ffffff;
  padding: 35px;
  text-align: center;
  height: 80%;
  width: 80%;
  border: 8px solid #F2F2F2;

    transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */

}
.circle h4{
  margin: 0;
  padding: 0;
}
.circle p{}
.circle span{}
.circle span.icon{
}
.circle span.icon i{
  font-size: 48px;
}
.circle span.price-large{
  font-size: 68px
}
.price-small{
  font-size: 24px 
}

.c1:hover{
  background: #39b3d7;
  color: #ffffff;
}
.c1 .blue{
  color: #39b3d7;
}
.c1:hover .blue{
  color: #ffffff;
}

.c2:hover{
  background: #ed9c28;
  color: #ffffff;
}
.c2 .yellow{
  color: #ed9c28;
}
.c2:hover .yellow{
  color: #ffffff;
}

.c3:hover{
  background: #47a447;
  color: #ffffff;
}
.c3 .green{
  color: #47a447;
}
.c3:hover .green{
  color: #ffffff;
}

.c4:hover{
  background: #d2322d;
  color: #ffffff;
}
.c4 .red{
  color: #d2322d;
}
.c4:hover .red{
  color: #ffffff;
}
.c1 .grey{
    color: #696969;
}
.c1:hover .grey{
    color: #ffffff;
}
.c2 .grey{
    color: #696969;
}
.c2:hover .grey{
    color: #696969;
}
.c3 .grey{
    color: #696969;
}
.c3:hover .grey{
    color: #696969;
}
.c1 .red{
  color: #d2322d;
}
.c1:hover .red{
  color: #ffffff;
}
.c2 .red{
  color: #d2322d;
}
.c2:hover .red{
  color: #ffffff;
}
.c3 .red{
  color: #d2322d;
}
.c3:hover .red{
  color: #ffffff;
}
.c2:hover{
  background: #d2322d;
  color: #ffffff;
}
.c1:hover{
  background: #696969;
  color: #ffffff;
}
.c3:hover{
  background: #696969;
  color: #ffffff;
}
.c3:hover .grey{
    color: #ffffff;
}

标签： htmlcssgoogle-chromesafari

Answer 1

.webp format is not supported in Safari Browser, You should load different format for safari using CSS Feature Query: