css in chrome只有在检查元素后才能工作 [英] css in chrome only works after inspect element

问题描述

我使用flexslider JQuery插件幻灯片我的网站中的几个元素。我还对应用flexslider的元素使用JQuery .click（）事件和 fadeIn（）fadeOut（）

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

任何人都可以解释发生了什么？

EDITED：
好​​一些检查后，布局改变时宽度/高度改变，所以这里的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 标签的元素

解决方案

p>我有类似的问题，其中css将不会加载后，我有.trigger（'click'）

p>

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

  $（'＃workDone'）。click（function（）{
 
 setTimeout ）{$（'＃mefirst'）。trigger（'click'）;}，100）; //提供延迟缓冲区加载时间css 
 
 
} 
  

I am using flexslider JQuery plugin to slideshow several elements in my site. I also use JQuery .click() event and fadeIn() fadeOut() effects on the elements that apply flexslider.

my site looks fine in firefox, but when i open it in chrome, the slides are stacked in one page. but what confuses me is, when i use inspect element in chrome, it sets the layout right, just like in firefox.

can anyone explain what's happening?

EDITED: okay after some inspection, the layout changes when the width/height is changed, so here's the css i use on the element that doesn't display properly:

#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;
}

the flexslider is placed within #content, and inside the slides are elements with h2 tags

解决方案

I had similar problem where the css won't load after I had .trigger('click')

and it loaded when I used inspect element in chrome

I solved the problem by having a pause before the .trigger('click') is triggered

for example :

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

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


             });

这篇关于css in chrome只有在检查元素后才能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！