カルーセルは画像をスタック：あなたはWebKitのブラウザでそのページを表示した場合のWebkit、クロム、Safariが唯一

Question

http://174.120.239.48/~peakperf/?page_id=260

、クロム/ Safariがあなたはカルーセルの内容は、互いの上に層状の取得ことがわかります。

MozillaまたはIEで表示すると内容が正しく表示されます。

ウェブキットでこのようなバグはありませんでしたので、私にとってはまったく新しいものです。

ご協力いただければ幸いです。

ありがとうございます！

CSS：私はChromeでインスペクタにそれらを見たときに何らかの理由で

.theme-twentycarousels { 
    width: 610px; 
} 

.scrollertitle p{ 
    margin: 0; 
    padding: 0; 
} 
.scrollertitle h2{ 
    padding-left: 10px; 
    padding-top: 10px; 
    text-transform:uppercase; 
    font-size: 15px; 
    font-weight: bold; 
} 
.scrollertitle .arrow-right { 
    width:12px; 
    float:right; 
    height: 37px; 
} 

.scrollertitle .arrow-left { 
    width:12px; 
    height:37px; 
    float:left; 

} 

.scrollertitle .arrow-left a { 
    margin:-20px 0 0 0; 
    width:12px; 
    height:37px; 
    background:url(img/arrow_left.png) top left no-repeat; 
    display:block; 

} 

.scrollertitle .arrow-right a { 
    margin:-20px 0 0 0; 
    width:12px; 
    height:37px; 
    background:url(img/arrow_right.png) top right no-repeat; 
    display:block; 
} 

.theme-twentycarousels .hide { display:none; } 

.theme-twentycarousels .stepcarousel { 
    position: relative; /* Leave this value alone */ 
    overflow: scroll; /* Leave this value alone */ 
    height: 155px; 
    background:#EEEFF4; 
    width: 610px; 

} 

.theme-twentycarousels .stepcarousel .belt{ 
    position: absolute; /* Leave this value alone */ 
    left: 0; 
    top: 0; 
    margin: 0px; 

} 

.theme-twentycarousels .stepcarousel .panel { 
    height:100px; 
    float: left; /* Leave this value alone */ 
    padding:10px; 
    background:#EEEFF4; 
    display:block; 
    width: auto; 
} 

.theme-twentycarousels .stepcarousel .panel .panel-text { 
    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; 
    color:#FFF; 
} 

.wp_carousel_twentycarousels_pagination { 
    padding:5px 10px; 
    background:#000; 
    text-align:center; 
    visibility:hidden; 
} 
.scrollertitle{ 
    height: 37px; 
    background: url(img/scrollertitle.jpg) no-repeat; 
    width: 610px; 
} 
.arrowcontainer{ 
    width: 50px; 
    height: 37px; 
    float: right; 
    margin-right: 10px; 
} 

Answer 1

は、画像を保持しているあなたのdivクラス=パネルを持つものは、インラインスタイルを持っています。

それらの特定のdiv要素のすべてから互いの上に積み上げからそれらを停止することを削除

style="float: none; position: absolute; left: 0px;" 

- しかし、彼らはもはや行のすべてに適合していませんでした。

私はまた、あなたのスタイルシートの2箇所で

.theme-twentycarousels .stepcarousel .panel 

を持っていることに気づきました。それが問題を引き起こしているかどうかはわかりません。