简单的 CSS 在 Iceweasel 31.2 中不起作用答案

【问题标题】：Simple css not working in Iceweasel 31.2简单的 CSS 在 Iceweasel 31.2 中不起作用
【发布时间】：2014-11-10 16:52:39
【问题描述】：

所以我正在为一个亲戚制作一个网站，我制作了一个最初不显示的网站（显示：无），并在用户点击页面上的某个位置时淡入。
它在 Chromium 上运行得很好，但是当我尝试使用 Iceweasel 31.2 时，应该淡入的页面部分的 CSS 不会加载。

点击按钮时调用的javascript函数：

var openGallery = function(){
    $('section, nav, #topleft').fadeOut(400);
    $('#gallerie').toggle();
}

这是涉及的 CSS

#gallerie
{
position: relative;
height: 874px;
width: 1152px;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
margin: auto;
text-align: center;
}

#gallerie img:first-of-type
{
max-width: 1100px;
max-height: 720px;
display: block;
margin-left: auto;
margin-right: auto;
}

.close
{
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}

.left, .right
{
position: static;
top: 746px;
}

最后，淡入/淡出的 HTML（注意其中的 JS 部分来自一些 PHP）

<div id="gallerie">
<script type="text/javascript">
var collection = [
    // "FILENAME" | "NAME" | WIDTH | HEIGHT
    ["6ème arrondissement-73 X 60.JPG","6ème arrondissement",1535,1832],
    (more data...)
    ["Sur la neige-55 X 46.JPG","Sur la neige",1853,1562]
]
</script>
    <h3>Gallerie</h3>
    <figure>
        <img src="data/tableaux/6ème arrondissement-73 X 60.JPG" class="big" title="6ème arrondissement" alt="0">
        <figcaption>6ème arrondissement</figcaption>
        <img src="images/left.png" alt="left" class="left" title="left"><img src="images/right.png" alt="right" class="right" title="right">
    </figure>
    <img src="images/close.png" class="close" title="Fermer la fenetre">
</div>

我真的不知道错误可能来自哪里。感谢您帮助我。

【问题讨论】：

您介意制作一个小提琴让其他人更清楚地看到您的问题吗？

标签： javascript html css iceweasel

【解决方案1】：

就我个人而言，我会使用 JQuery 来切换类事件并使用它们来进行转换等。现在，CSS3 在浏览器中都相当不错。

代替：

$('section, nav, #topleft').fadeOut(400);

我会添加处理带有过渡的淡入淡出的 CSS。

看看我这里做的笔看看效果。您可以添加 toggleClass();添加类（）；或 removeClass();你应该选择。

http://codepen.io/brycesnyder/pen/LEPJZg

编辑：.toggle();会造成愚蠢的影响，我的意思是 .toggleClass();

【讨论】：