chrome中的css仅在检查元素后才有效答案

【问题标题】：css in chrome only works after inspect elementchrome中的css仅在检查元素后才有效
【发布时间】：2012-04-12 17:37:42
【问题描述】：

我正在使用 flexslider JQuery 插件来幻灯片显示我网站中的几个元素。我还在应用 flexslider 的元素上使用了 JQuery .click() 事件和 fadeIn() fadeOut() 效果。

我的网站在 Firefox 中看起来不错，但是当我在 chrome 中打开它时，幻灯片堆叠在一页中。但让我感到困惑的是，当我在 chrome 中使用检查元素时，它会正确设置布局，就像在 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 标签的元素

【问题讨论】：

jsFiddle 示例好吗？

标签： jquery css cross-browser

【解决方案1】：

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

试着检查你的代码：

http://validator.w3.org/

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

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

【讨论】：

【解决方案2】：

我有类似的问题，我有 .trigger('click') 后 css 无法加载

当我在 chrome 中使用检查元素时加载它

我通过在触发 .trigger('click') 之前暂停来解决问题

例如：

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

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


             });

【讨论】：