CSS в Chrome работает только после проверки элемента

Question

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

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

Answer 1

У меня была похожая проблема, когда css не загружался после того, как у меня был .trigger ('click')

и он загрузился, когда я использовал inspect element in chrome

Я решил проблемупауза перед триггером ('click') запускается

, например:

$('#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/

Или укажите код страницы слайдера.