0

私のコードは、IEを除くすべてのブラウザーで完全に機能します。フォーラムで見つけたすべての解決策を試してみましたが、運がありませんでした。私はまだJavaScriptを学んでいるので、後でjQueryを学びます。問題は、IEではスライドが垂直に表示されても効果がないことです。これが私のコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="stylesheet...css" rel="stylesheet" type="text/css" />

    <title>div test</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.bxSlider.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var slider = $('#slider1').bxSlider({
                controls: false
            });

            $('#bx-prev').click(function () {
                slider.goToPreviousSlide();
                return false;
            });

            $('#bx-next').click(function () {
                slider.goToNextSlide();
                return false;
            });
        });
    </script>
</head>

<body>
    <div id="slider1">
        <div>
            <div id="wrapper">
                <div id="head"><img alt="logo" align="left" src="logo.png"/></div>
                <div id="main"> <div id="content">content</div> </div>
                <div id="rash"><img alt="r" align="middle" 
                                    style="position:relative;top:-70px;" 
                                    src="image1.png"/></div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div>
            <div id="wrapper">
                <div id="head"><img alt="logo" align="left" src="logo.png"/></div>
                <div id="main"> <div id="content">content</div> </div>
                <div id="rash"><img alt="r" align="middle" 
                                    style="position:relative;top:-70px;"
                                    src="image1.png"/></div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div>page3</div>
        <div>page4</div>
    </div>
    <div id="bx-next">next</div>
    <div id="bx-prev">prev</div>
</body>
</html>

そして、これが私のスタイルシートです：

div#head {
    width:100%;
    height:100px;
    /*background-color:antiquewhite;*/
    margin-bottom:100px;
}

div#content {
    border-left: 2px solid #F0F8FF;
    border-right: 2px solid #8a815d;
    border-top: 2px solid #8a815d;
    border-bottom: 2px solid #8a815d;
    width:400px;
    height:300px;
    -webkit-border-radius: 0px 28px 20px 0px;
    -moz-border-radius: 0px 28px 20px 0px;
    border-radius: 0px 28px 20px 0px;
    font-family:Arial,Helvetica,sans-serif;
    color:#8a815d;
    padding-left:100px;
    background-color:#F0FFFF;
    background-color: rgba(215,227,211,0.3);
    position:relative;
    top:20px;
    left:0px
}


div#wrapper {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}

div#main {
    /* background-color:black;*/
    width:50%;
    height:360px;
    float:left;
}

div#rash {
    float:right;
    /*background-color:blue;*/
    height:360px;
    width:50%;
}

body {
    background-color: #E8F3F9;
    background-image: url('squares layer.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

/*next button*/
#bx-next {
    position:absolute;
    top:45%;
    right:3px;
    z-index:998;
    width: 30px;
    height: 30px;
    text-indent: -999999px;
    background: url(gray_next.png) no-repeat 0 -30px;
}

/*previous button*/
#bx-prev {
    position:absolute;
    top:45%;
    left:4px;
    z-index:998;
    width: 30px;
    height: 30px;
    text-indent: -999999px;
    background: url(gray_prev.png) no-repeat 0 -30px;
}
4

2 に答える 2

1

私も同様の問題を抱えており、まだ結論には達していませんが、これまでにわかったことから、この問題をデバッグするには、コードを検証することから始める必要があります。 http://validator.w3.org/ コードをコピーしたところ、5 つのエラーがあったとのことでした。IE は非常にうるさいので、これらのエラーを修正することから始めると思います。エラーがある場合は、フォーマットに影響を与える可能性があります。また、IE はコードの先頭にある Doc Type にこだわりがあり、それが正しくない場合、ページの書式設定にも影響を与える可能性があることも知っています。同様の問題を解決できる場合は、あなたが抱えているのと同じ問題である可能性が高いため、お知らせします.

于 2013-09-13T16:50:30.010 に答える
0

<div id="wrapper">が 2 回定義されています。ID は、ページのすべての要素に対して一意である必要があります。<div id="head">、<div id="main">、について<div id="content">も同様<div id="rash">です。

また、IE コンソールでデバッグしようとしましたか? コンソールが実行時にエラーを記録するかどうか試してみてください。次に、SO に戻り、それらのエラーを投稿します。

乾杯。

于 2014-03-13T07:45:14.027 に答える