Question

我正在尝试使用bxslider插件在主页上创建一个简单的滑块。滑块在Chrome和IE中完美运行，但在Firefox中，图像不居中，右侧为50％。我真的想不通，这里有什么问题。图像大小为1027x360px。

这是我的代码：

<div class="slider">
<div class="container slider-width">
    <ul class="bxslider">
        <li>
            <img src="img/slider/banner.png" />
            <div class="offers" id="offers_0">
                <h2>&#62; Capition text</h2>
            </div>
        </li>
        <li>
            <img src="img/slider/banner.png" />
            <div class="offers" id="offers_1">
                <h2>&#62; Capition text</h2>
            </div>
        </li>
        <li>
            <img src="img/slider/banner.png" />
            <div class="offers" id="offers_2">
                <h2>&#62; Capition text</h2>
            </div>
        </li>
    </ul>
</div>

CSS代码：

.slider {
    width: 100%;
    height: 360px;
    position: relative;
    margin: -12px auto 0px auto;
    padding: 0;
    text-align: center;
    background: #f58d24;
}

.slider-width {
    min-width: 1027px;
    margin: 0 auto;
}

.bx-wrapper .bx-pager {
    top: 340px;
}

.bx-wrapper img {
    display: block;
    width: 1027px;
    height: 360px;
}

.offers {
    position: absolute;
    z-index: 1000;
    top: 80px;
    left: 0px;
    text-align: left;
}

.offers h2 {
    background: none;
    font-family: "plavskyregular";
    padding: 10px 0px 10px 30px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    text-shadow: 1px 1px 0px #fff;
    color: #343434;
    margin: 0px;
    font-size: 36px;
    font-weight: bold;
}

Bxslider，firefox中的图像不居中

0 个答案: