2

我使用 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>
4

1 回答 1

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还有什么意义？

于 2012-08-28T00:03:02.300 回答