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 に答える