Question

我正在使用flexslider JQuery插件来幻灯片显示我网站中的几个元素。我还对应用flexslider的元素使用JQuery .click()事件和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个标签的元素

Answer 1

我遇到了类似的问题，在我使用.trigger（＆＃39;点击＆＃39;）之后，css不会加载

并且在我使用chrome

中的inspect元素时加载了它

我通过在触发.trigger（＆＃39;点击＆＃39;）之前暂停来解决问题

例如：

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

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


             });

Answer 2

如果css或html本身存在错误，有时会发生这种情况。

尝试检查您的代码：

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

或提供滑块页面的代码。

chrome中的css仅在检查元素之后工作

2 个答案: