CSS, JQuery Cycle và IE issue

Question

Tôi đang sử dụng một plugin jQuery có tên là "Cycle" và tôi gặp vấn đề với CSS cho nó trong IE, nó trông hoàn hảo trong Opera, FF, Chrome và Safari, nhưng IE đang bẻ khóa các sads ..

www [dot] photographicpassions [chấm] com/home

Bạn sẽ thấy những "tác phẩm mới nhất" ở phía bên tay phải và các hình nhỏ bên dưới hình ảnh chính, trong FF, Safari, Chrome và Opera, vùng chứa màu xám nằm phía sau tất cả các hình thu nhỏ, nhưng trong IE, nền màu xám dừng lại ở đầu hình thu nhỏ. Tôi đã thử nhiều thứ khác nhau để làm cho nó hoạt động, không có kết quả ... ai đó có thể giúp tôi không? ?

Đây là CSS cho các container mà không được chơi thoải mái tại IE:

/* latest work container */ 
div#latestHolder { 
    position: relative; 
    float: left; width: 368px; 
    margin: 0px 0px 0px 0px; 
    padding: 10px 10px 10px 10px; 
    background-color: #666666; 
} 

/* thumbnails */ 
div#nav { 
    position: relative; 
    float: left; left: 0px; 
    width: 376px; 
    padding: 0px 0px 0px 0px; 
    margin: 1px 0px 0px 0px; 
} 
    div#nav li { 
     width: 66px; 
     float: left; 
     padding: 0px 0px 0px 0px; 
     margin: 9px 9px 0px 0px; 
     list-style: none; 
     cursor: pointer; 
    } 
    div#nav a { 
     padding: 3px; 
     display: block; 
     background: #404040; 
     cursor: pointer; 
    } 
     div#nav a.activeSlide { 
      background: #ffffff; 
      cursor: pointer; 
     } 
     div#nav a:focus { 
      outline: none; 
      cursor: pointer; 
     } 
    div#nav img { 
     width: 60px; 
     border: none; 
     display: block; 
     cursor: pointer; 
    } 

Nếu ai đó có thể giúp tôi ra, mà muốn được tuyệt vời !! :)

Answer 1

Chỉ cần sử dụng overflow: hidden vào container của bạn. Theo mặc định, tràn: tự động sẽ không phát triển các phần tử chứa nội dung của nó. Thiết lập overflow: hidden (hoặc overflow: auto ... bit mà bạn có nguy cơ scrollbars không mong muốn), bạn sẽ buộc div container của bạn để mở rộng đến cao của tất cả các yếu tố con của họ ... các yếu tố nổi bao gồm.

Answer 2

div #latestHolder được thả sang trái, làm cho nó thành be removed from the flow of the page. Hãy thử sử dụng vị trí tương đối/tuyệt đối thay vì float:left; hoặc xóa dấu phẩy trước khi bạn kết thúc số #mainContainer div.

Clearing sẽ bao gồm ném trong một phần tử khối cấp vào cuối của #maincontainer div như vậy:

<div style="clear: both;"></div>