Jquery chrome中的css仅在inspect元素之后工作

我正在使用flexslider JQuery插件在我的网站上以幻灯片形式展示几个元素。我还对应用flexslider的元素使用JQuery

。单击（）

事件和

fadeIn（）fadeOut（）

效果

我的网站在firefox中看起来很好，但当我在chrome中打开它时，幻灯片被堆叠在一个页面中。但让我困惑的是，当我在chrome中使用inspect元素时，它设置了正确的布局，就像在firefox中一样

有人能解释发生了什么事吗

编辑： 好的，在一些检查之后，当宽度/高度改变时，布局也会改变，因此我在元素上使用的css不能正确显示：

#content{
    width: 80%;
    margin: 2% 10%;
    padding: 3% 1%;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 2px 3px 0 #aaa;
       -moz-box-shadow: 0 2px 3px 0 #aaa;
        box-shadow: 0 2px 3px 0 #aaa;
    }
h2{
    width: 80%;
    margin: 5% 10%;
    color: #808080;

    font-family: "Lobster", Arial;
    font-weight: bold;
    font-size: 5em;

    line-height: 1em;
    text-align: center;
}

---

flexslider放在

#content

中，幻灯片中有带有

h2

标记的元素，如果css或html本身有错误，有时会发生这种情况

请尝试检查您的代码：

---

或者提供滑动页面的代码。

我遇到了类似的问题，在我使用.trigger（'click'）后，css无法加载

当我在chrome中使用inspect元素时，它被加载了

我通过在触发.trigger（'click'）之前暂停来解决这个问题

例如：

$('#workDone').click(function(){

             setTimeout(function(){$('#mefirst').trigger('click');}, 100); //providing delay to buffer load time of css


             });

---

请给我一些样品好吗？