圖像陰影

Question

我有以下的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> 

****** Live example here！ http://lawb.co.il/ ******

進入#page事業部的問題可以解決，但唯一的問題是，比complatly上的內容的影子，UND不behund他

你認罪能幫助我有了這個？

希望得到幫助，謝謝！

Answer 1

任何原因爲什麼你可以使用圖像來創建陰影，當你可以使用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左側。很可能你會看到不一致，因爲 你沒有使用重置，並且東西相對定位。如果在#page容器內不需要絕對定位，您實際上不需要定位相對位置和陰影。