Question

我使用easyslider，它在Firefox，IE 7中运行良好，但在IE 8/9中，当我有内容和图像时，最奇怪的事情就发生了。背景图片不符合我的内容。

所以如果它有：

内容为1的图片1
图片2，内容为2
图片3，内容为3

一切都在排队，但在IE9中，我看到了：

图片1，内容为2
图片2，内容为3
图片3，内容为1

当我将浏览器更改为兼容模式时，它再次正常工作，但如果我删除它，那么它会回到上面的问题。非常奇怪。

这是我的css：

 <style type="text/css">
    .slider-container
    {
        width: 639px;
        overflow: hidden;
        background: url(http://www.mysite.com/image.png) no-repeat -0px top transparent;
        height: 291px;
        padding: 2px 0 0 4px;
        position: relative;
    }
    .slider
    {
        width: 639px;
        height: 271px;
        overflow: hidden;
        position: relative;
        margin-top: 0;
        margin-left: 0px;
    }
    #slider
    {
        width: 639px;
        height: 271px;
        overflow: hidden;
        position: relative;
        margin-top: 0;
        margin-left: -43px;
    }

这是我的HTML：

 <div class="slider-container">
    <div id="slider">
        <ul class="slider">

                 <li>
                    <img alt="" id="slide1" src="http://www.internationalnetworksolutions.net/images/1245854909_content_graphic_cost-savings.jpg" style="width: 639px; height: 271px" />
                    <div class="slider-content">
                        <p class="title">Title1</p>
                        <p class="text">Text1</a></p>
                    </div>
                </li>

                 <li>
                    <img alt="" id="slide2" src="http://media.treehugger.com/assets/images/2011/10/20081023-altamont-pass-wind-turbine.jpg" style="width: 639px; height: 271px" />
                    <div class="slider-content">
                        <p class="title">Title 2</p>
                        <p class="text">Text 2</a></p>
                    </div>
                </li>

                 <li>
                    <img alt="" id="slide5" src="http://www.psdgraphics.com/wp-content/uploads/2009/03/world-map-background.jpg" style="width: 639px; height: 271px" />
                    <div class="slider-content">
                        <p class="title">Title 3</p>
                        <p class="text">Text 3</a></p>
                    </div>
                </li>


        </ul>
    </div>
</div>

Answer 1

您是否正确设置了DOCTYPE？也许：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

我也觉得这很有用：

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

同时删除额外的

</a>

滑块内容中的

......

在背景CSS上-0px中有什么意义？

当你有图像和内容（div）时，IE8和IE9上的jquery easyslider是否被破坏了？

1 个答案: