firefox和chrome的宽度问题,我该如何解决?

时间:2011-11-26 12:26:28

标签: html css firefox google-chrome

我在页脚的页面上遇到了chrome和firefox的问题。当您使用Firefox,Safari和IE访问该网站时,页脚就可以了。

Firefox预览

  

http://imageshack.us/photo/my-images/830/firefoxw.png/

Chrome预览

  

http://imageshack.us/photo/my-images/543/chromefooter.png/

我认为Chrome中的某些内容会覆盖页脚宽度,这就是为什么它更大。

我在这里放了一个JS小提琴来证明这个问题:

  

http://jsfiddle.net/7XCRt/

以下是页脚的css代码:

#footer {
    overflow: hidden;
    border-top: 1px solid #DBDBDB;
    color: #BBBBBB;
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    width:945px;
}

网站结构:

<!-- BEGINN MAINWRAPPER -->
<div id="mainWrapper">
    <!-- BEGIN WRAPPER -->
    <div id="wrapper">
        <!-- BEGIN HEADER -->
        <div id="header">
            <div id="logo"></div>
        </div>
        <!-- END HEADER -->

        <!-- BEGIN CONTENT -->
        <div id="content">
                <div id="middle">
           .......
                </div>
               <!-- END MIDDLE -->
           <!-- BEGIN FOOTER -->
           <div id="footer">
               </div>
           <!-- END FOOTER -->
               </div>
           <!-- END CONTENT -->
       </div>
       <!-- END WRAPPER -->
   </div>
   <!-- END MAINWRAPPER -->

其他人的css代码:

#wrapper {
    margin:0 auto;
    width:945px;
}
#middle {
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    height: 100%;
    left: 0;
    overflow: hidden;
    top: 0;
    width: 945px;
    z-index: -2;
}

#content {
    overflow:hidden;
    margin-top:90px;
}

0 个答案:

没有答案