2012-03-29 37 views
5

Tôi đang sử dụng plugin JQuery flexslider để trình chiếu một số thành phần trong trang web của mình. Tôi cũng sử dụng sự kiện JQuery .click() và hiệu ứng fadeIn() fadeOut() trên các yếu tố áp dụng flexslider.css trong chrome chỉ hoạt động sau khi kiểm tra phần tử

trang web của tôi có vẻ tốt trong firefox, nhưng khi tôi mở trang web bằng chrome, các trang trình bày được xếp chồng lên nhau trong một trang. nhưng những gì gây nhầm lẫn cho tôi là, khi tôi sử dụng phần tử kiểm tra trong chrome, nó đặt bố trí đúng, giống như trong firefox.

ai có thể giải thích điều gì đang xảy ra không?

EDITED: ổn sau khi một số kiểm tra, bố trí thay đổi khi chiều rộng/chiều cao được thay đổi, vì vậy đây là css tôi sử dụng trên các yếu tố đó không hiển thị đúng:

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

các flexslider được đặt trong #content và bên trong các trang trình bày là các thành phần có các nhãn h2

+2

jsFiddle mẫu, vui lòng? – moey

Trả lời

2

Tôi có vấn đề tương tự nơi css sẽ không tải sau khi tôi đã .trigger (nghe tiếng 'click')

và nó được nạp khi tôi sử dụng kiểm tra phần tử trong chrome

tôi giải quyết vấn đề bằng việc có một tạm dừng trước khi .trigger (nghe tiếng 'click') được kích hoạt

ví dụ:

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

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


      }); 
Các vấn đề liên quan