javascript - 我的 HTML CSS 代码不适用于 Safari，但适用于所有其他浏览器

问题描述

我为我的客户网站创建了一个动画卡，但是 html css 代码在 safari（在移动设备上）上不起作用，而它在 Chrome、Firefox 上正常工作。我还添加了 -webkit-animation: 以实现浏览器兼容性。它在安卓浏览器上运行良好，但在 iPhone Safari 动画中不起作用。下面是我的css代码。我无法理解问题所在。

<div class="container">
<div class="col-xs-12 col-sm-6 col-md-4 wow fadeInLeft">
<div class="service-box icon-box iconbox-theme-colored bg-white p-30 mb-30 border-1px">       
    <a class="icon icon-dark border-left-theme-colored2-3px pull-left flip">
    <i class="fa fa-cogs"></i>
    </a>
    <div class="icon-box-details" style="padding-top: 5px;font-family: 'VodafoneRg_0'">
    <p style="font-weight: 600;font-size:20px ">MIDC <br>Solutions</p>
     </div>
    &nbsp;
    <p style="font-size: 20px">Expertise in giving Maharashtra Industrial Development Corporation Solutions & Services in relation to it.</p>
</div>
</div>
</div>

   .icon-box {
        margin-bottom: 30px;}

        .service-box {
        position: relative;
        border-bottom: 3px solid transparent;
        border-top: 0;}

        .icon-box.iconbox-theme-colored .icon.icon-dark {
        background-color: #ffcb05;
        color: #383431;}

        .icon-box.iconbox-theme-colored .icon {
        color: #002E5B;}

        .icon-box .icon.icon-dark {
        background-color: #111111;
        color: #fff;}

        .icon-box .icon {
        display: inline-block;
        height: 70px;
        margin-bottom: 0;
        -webkit-animation: all 0.3s ease;
        -moz-animation: all 0.3s ease;
        -o-animation: all 0.3s ease;
        width: 70px;
        text-align: center;}

        .border-left-theme-colored2-3px {
        border-left: 3px solid #005aaa !important;}

        .icon-box .icon i {
        line-height: 70px;}

        .icon-box i {
        display: inline-block;
        font-size: 40px;
        -webkit-animation: all 0.3s ease;
        -moz-animation: all 0.3s ease;
        -o-animation: all 0.3s ease;}

        .icon-box .icon-box-details {
        margin-left: 80px;
        font-family: 'VodafoneLt_0';
        font-size: 18px;}

        .service-box:after {
        background: #005aaa;}

        .service-box:after {
        content: "";
        height: 3px;
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        -webkit-animation: all 0.3s ease;
        -moz-animation: all 0.3s ease;
        -o-animation: all 0.3s ease;
        -ms-animation: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;}

        .service-box:hover:after {
        width: 100%;
        -webkit-animation:800ms ease all;}

标签： javascriptjqueryhtmlcss

javascript - 我的 HTML CSS 代码不适用于 Safari，但适用于所有其他浏览器

问题描述

解决方案

推荐阅读