Question

所以这是我的HTML代码。

 <script type="text/css">
    .slider-holder { 
        background-color:transparent;
        }

    .slider-bg {
        min-height: 295px;
        position: relative;
        z-index: 1;
        border-bottom:0px;

        }

    .slider {
        height: 295px;
        padding: 1px 17px 0;
        margin: 0 auto;
        position: relative;
        background: transparent;

    }

    .slider .items,
    .slider .items2 {
        position: relative;
        height: 293px;
        float: left;
    }

    .slider .items div.item,
    .slider .items2 div.item{
        height: 293px;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .slider .slider-text {
        width: 720px;
        position: relative;
        z-index: 2;
        padding: 70px 0 0;
    }

    .slider .slider-text, .slider .slider-text p {
        background-color: inherit;
        color: #fff;
        font-size: 32px;
        line-height: 33px;
    }

    .slider .slider-text.smaller p 
        {
        font-size:24px;
        }

    .slider .slider-text p { padding: 0 0 10px; }

    .slider .slider-text a.slider-btn {
        background: #58940a url('img/btn/slider-btn.png') no-repeat 8px 7px;
        display: block;
        float: left;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
        -webkit-box-shadow: 0px 0px 40px #666;
        -moz-box-shadow: 0px 0px 40px #666;
        box-shadow: 0px 0px 40px #666;
        padding: 6px 10px 6px 32px;
        color: #fff;
        font-size: 15px;
        line-height: 20px;
        height: 20px;
    }

    .slider .slider-img {
        position: absolute;
        bottom: 0px;
        padding: 0 5px 0 0;
        z-index: 1;
        left:-312px;
        zoom: 1;

    }

    .slider .slidetabs {
        position: absolute;
        left:375px;
        bottom: 27px;
        z-index: 3;
    }

    .slider .slidetabs a {
        background: url('img/elem/thumbnail-disc.png') no-repeat left top;
        display: block;
        width: 11px;
        height: 11px;
        float: left;
        margin: 0 6px 0 0;
    }

    .slider .slidetabs a:hover, .slider .slidetabs a.current { background-position: left bottom; }
</script>

<div class="slider-holder">
    <div class="slider-bg"> 
        <!--begin:slider-->
        <div class="slider"> 
            <div class="items"> 
                <!--begin:item-->
                <div class="item" style="display: none; ">
                    <div class="slider-text"></div>
                    <div class="slider-img"> 
                        <img src="image.jpg" alt="" width="1600" height="294" align="center">
                    </div>
                </div>
                <!--end:item--> 
                <!--begin:item-->
                <div class="item" style="display: none; ">
                    <div class="slider-text smaller"></div>
                    <div class="slider-img"> 
                        <img src="image2.jpg" alt="" width="1600" height="294" align="center">
                    </div>
                </div>
                <!--end:item-->
                <!--begin:item-->
                <div class="item" style="display: block; ">
                    <div class="slider-text"></div>
                    <div class="slider-img"> 
                        <a href="http://www.link.com" target="_blank">
                            <img src="image.jpeg" alt="" width="1600" height="294" align="center">
                        </a>
                    </div>
                </div>
                <!--end:item-->  
            </div>
            <div class="slidetabs"> 
                <a href="#" class=""></a> 
                <a href="#" class=""></a>
                <a href="#" class="current"></a>  
            </div>
        </div>
        <!--end:slider--> 
    </div>
</div>

这个特殊设置的问题是img比div大（这是故意的。这个设置适用于除IE8之外的大多数浏览器。它在.slider-holder框中被切断（或者至少它出现）到）。

Answer 1

发现缓存插件正在破坏网站。继续。

IE8图像大于div，相对/绝对和负边距

1 个答案: