0

次の HTML ソースがあります。 

    <div id="page">
        <div id="header">
            <!-- end header div -->
        </div>
        <div id="dropdown">
       <!--navigator menu is here!-->
        </div>

    <div id="main">
 <!--main is here!-->
     </div>
       <div id="sidebar">
           <!--sidebar menu is here!--></div>
        <div id="footer">

        </div>
        <!-- end page div -->
    </div>
    <div id="leftshadow"></div>
    <div id="rightshadow"></div>
</body>

そしてこれがCSSソース

/* html selectors ---- */

html, body {
    font-family: 'Arial Unicode MS';
    margin: 0;
    padding: 0;
    background-repeat: repeat-x;
    background-color: white;
    direction: rtl;
    font-size: 10.3pt;
}



/*page -----------*/
#page {
    width: 900px;
    padding: 0px;
    margin: 0 auto;
    direction: rtl;
    position: relative;
    z-index: 100;
    z-index: 5;
    background-image: url("images/bgimage.png");
}

#leftshadow {
    width: 100px;
    height: 900px;
    background-image: url("images/leftshadow.png");
    position: absolute;
    right: 1220px;
    z-index: none;
    top: -50px;
}

#rightshadow {
    width: 100px;
    height: 900px;
    background-image: url("images/rightshadow.png");
    position: absolute;
    right: 345px;
    z-index: none;
    top: -25px;
}


/* header ---------- */

#header {
    height: 110px;
    top: 0px;
    line-height: 30px;
    background-image: url("images/header.png");
    background-position-x: center;
    background-repeat: repeat-x;
}


/* main -------------- */



#main {
    line-height: 21px;
    font-family: arial;
    width: 625px;
    padding: 30px;
    position: relative;
    right: 205px;
    padding-bottom: 80px;
    direction: rtl;
    top: 42px;
    padding-right: 60px;
    min-height: 750px;

      text-align: justify;

}

通常、私はこの結果を得ました私が欲しいもの

しかし、Internet-Explorerでこの結果を得ました私が得るもの

私が挿入する場合、私はそれを知っています 

   <div id="leftshadow"></div>
         <div id="rightshadow"></div>

******実例はこちら！http://lawb.co.il/ ******

#page Div に入れると問題は解決できますが、唯一の問題は、影がコンテンツに完全に存在することです。

これで私を助けてくれませんか？

助けてください、ありがとう！

4

1 に答える 1

0

CSS3 box-shadowを使用できるのに、画像を使用して影を作成する理由はありますか?

このアプローチを使用する場合は、HTML 構造を次のように変更します。

<div id="page">
    <div id="leftshadow"></div>
    <div id="header">
        <!-- end header div -->
    </div>
    <div id="dropdown">
        <!--navigator menu is here!-->
    </div>

    <div id="main">
        <!--main is here!-->
    </div>
    <div id="sidebar">
        <!--sidebar menu is here!-->
    </div>
    <div id="footer">
        <!-- footer -->
    </div>
    <!-- end page div -->
    <div id="rightshadow"></div>
</div>

次に、右のシャドウ div を右に、左のシャドウ div を左にフロートします。ほとんどの場合、リセットを使用しておらず、物事が相対的に配置されているため、矛盾が見られます。#pageコンテナ内で絶対に配置する必要がない場合は、すべてを相対的に配置する必要はなく、影を配置する必要はありません。

于 2013-02-28T22:04:05.337 に答える