Question

我为我的客户网站创建了一张动画卡，但html css代码在Safari（On Mobile）上不起作用，而它适用于Chrome，Firefox。我还添加了-webkit-animation：用于浏览器兼容性。它在andriod浏览器上工作正常但在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;}

Answer 1

确保正确提供浏览器兼容性的所有前缀（提供更多说明的代码）

animation:
-webkit-animation:
-moz-animation:
-o-animation:
-ms-animation:

Answer 2

HTML应该适用于所有浏览器，除非浏览器不支持最新版本的HTML（HTML5）。

另一方面，CSS在浏览器之间可能略有不同。如果您正在使用动画，可以使用以下内容：

animation: /* Chrome, Firefox */
-webkit-animation: /* Safari, Opera, Edge */
-moz-animation: /* Gecko (FireFox) */

我建议使用所有这些用户，但有些用户会使用Chrome以外的其他内容。

我的HTML CSS代码在Safari上不起作用，但适用于所有其他浏览器

2 个答案: