Safari 未运行 css display:none 属性 [英] Safari not running css display:none property

问题描述

我有以下 html:

<div style="color: #28ABE3;font-size: 14px;float: left;">获取教科书</div><div id="block_1" class="barlittle"></div><div id="block_2" class="barlittle"></div><div id="block_3" class="barlittle"></div><div id="block_4" class="barlittle"></div><div id="block_5" class="barlittle"></div><br>

这是 HTML 生成的内容:

现在我有以下 CSS，当浏览器运行时 loadinganimationsearch 在 chrome 和 firefox 中没有显示.

 #loadinganimationsearch {显示:无；}

但是现在当我在 Safari 5.1.7 中运行它时，它似乎出于某种原因几乎忽略了 CSS.为什么会发生这种情况，我该如何解决?

解决方案

找了一圈，找到了罪魁祸首:

@-moz-keyframes 移动 {0% {-moz-transform:规模(1.2)；不透明度:1；}100% {-moz 变换:比例(0.7)；不透明度:0.1；};/* 这个分号不应该在这里 */}@-webkit-keyframes 移动 {0% {-webkit-transform: scale(1.2);不透明度:1；}100% {-webkit-transform: scale(0.7);不透明度:0.1；};/* 这个分号不应该在这里 */}

动画关键帧百分比后不应有分号.应该是:

@-moz-keyframes 移动 {0% {-moz-transform:规模(1.2)；不透明度:1；}100% {-moz 变换:比例(0.7)；不透明度:0.1；}}@-webkit-keyframes 移动 {0% {-webkit-transform: scale(1.2);不透明度:1；}100% {-webkit-transform: scale(0.7);不透明度:0.1；}}

我认为在 Safari 解析分号后，以下 CSS 均不会生效.

I have the following html:

<div id="loadinganimationsearch">
    <div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div>   
    <div id="block_1" class="barlittle"></div>
    <div id="block_2" class="barlittle"></div>
    <div id="block_3" class="barlittle"></div>
    <div id="block_4" class="barlittle"></div>
    <div id="block_5" class="barlittle"></div>
    <br>
</div>

This is what the HTML produces:

Now I have the following CSS, that as the browser runs the loadinganimationsearchhas no display in chrome and firefox.

 #loadinganimationsearch {
     display: none;
}

But now when I run it in Safari 5.1.7, it seems to almost ignore the CSS for some reason. Why is this happening and how can I fix it?

解决方案

After searching around, I found the culprit:

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    }; /* This semicolon shouldn't be here */
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }; /* This semicolon shouldn't be here */
}

There shouldn't be semicolons after the animation keyframe percentages. It should be:

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    }
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }
}

I presume that after Safari parses the semicolons, none of the following CSS takes effect.

这篇关于Safari 未运行 css display:none 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！