Question

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

如果您使用webkit浏览器Chrome浏览器查看该页面，您会看到轮播内容相互叠加。

如果您在Mozilla或IE中查看它，内容将正确显示。

我从未在webkit中遇到过这样的错误，所以这对我来说都是新手。

任何帮助都将不胜感激。

谢谢！

CSS：

.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

出于某种原因，当我在Chrome中的检查器中查看图像时，持有图像的div（具有class = panel的div）具有内联样式。

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

从所有这些特定的div中删除它会阻止它们堆叠在彼此之上 - 但是，它们不再适合所有行。

我也注意到你有

.theme-twentycarousels .stepcarousel .panel

在样式表的两个位置。不确定这是否会导致任何问题。

Carousel堆叠图像：仅限Webkit，Chrome，Safari

1 个答案: