css in chrome работает только после элемента проверки

Question

Я использую плагин flexslider JQuery для слайд-шоу нескольких элементов на моем сайте. Я также использую событие JQuery .click() и эффекты fadeIn() fadeOut() для элементов, применяющих flexslider.

мой сайт отлично выглядит в firefox, но когда я открываю его в хроме, слайды сложены на одной странице. но меня смущает, когда я использую элемент проверки в chrome, он правильно устанавливает макет, как в 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 тегами

Answer 1

иногда это происходит, если есть ошибки в самом CSS или html.

Попробуйте проверить ваш код:

http://validator.w3.org/

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

Или предоставить код слайдера страницы.

Answer 2

У меня была аналогичная проблема, где CSS не будет загружаться после того как я .trigger («щелчок»)

и он загружен, когда я проверить элемент в хроме

Я решил проблему, имеющую пауза перед .trigger ('щелчок') запускается

, например:

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

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


      });