图像阴影

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容器内不需要绝对定位，您实际上不需要定位相对位置和阴影。