javascript - CSS跨浏览器改变布局

Question

当我在其他浏览器上尝试时，我的 CSS 设计有问题:

到目前为止，我在 Mozilla 做了这个

左侧栏和内容适合浏览器屏幕

但是当我尝试 Chrome 时

我试过删除内容变成这样(没有滚动条，但还是有一些空格):

设计改变了，我不知道为什么会这样，因为我才开始尝试 CSS 设计并且没有任何经验:( 任何人都可以帮助我解决这个问题吗？

编码:

#containerLeft
{
    z-index: -1;
}

#leftcolumn {

    height:100%;
    background-repeat:none;
    z-index:100;
}
.bottom {
    margin: none;
    width: 180px;
    height: 17px;
}
ul {
    background-image: url(SlicingImage/action_bar.jpg);
    background-repeat:no-repeat;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    position: left;
    float:left;
}
li {
    list-style:none;
    background-repeat:repeat-y;
}
.separator {
    background-image:url(SlicingImage/separator.png);
    background-position:center;
    width:171px;
    /*select your width */
    height:5px;
    /*select your height */
    margin-left:auto;
    margin-right:auto;
}
.buttons {
    display:block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color:#FFF;
    background-image:url(SlicingImage/button_unselect.png);
    margin: none;
    height: 53px;
    width: 180px;
    text-transform:uppercase;
    text-align:center;
    position:relative;
    line-height:53px;
}

HTML

<div id="containerleft">
   <div id="leftcolumn">
    <ul>
            <p><img src="SlicingImage/alacards_logo.png"/>

            <li class="separator"></li>            
            <a href="#" id="home" class="showLink" onclick="showHide('example');return false;"><li class="buttons">
            home
            </li></a>
            <li class="separator"></li>
            <a href="#" id="user" class="showLink" onclick="showHide('example2');return false;"><li class="buttons">
            users
            </li></a>
            <li class="separator"></li>
            <a href="#" id="tutorial" class="showLink" onclick="showHide('example3');return false;"><li class="buttons">
            tutorial
            </li></a>
            <li class="separator"></li>
            <a href="#" id="issuer" class="showLink" onclick="showHide('example4');return false;"><li class="buttons">
            issuers
            </li></a>
            <li class="separator"></li>
            <a href="#" id="merchant" class="showLink" onclick="showHide('example5');return false;"><li class="buttons">
            merchants
            </li></a>
            <li class="separator"></li>
            <a href="#" id="partner" class="showLink" onclick="showHide('example6');return false;"><li class="buttons">
            partners
            </li></a>
            <li class="separator"></li>
            <a href="#" id="highlight" class="showLink" onclick="showHide('example7');return false;"><li class="buttons">
            high light
            </li></a>
            <li class="separator"></li>
            <a href="#" id="news" class="showLink" onclick="showHide('example8');return false;"><li class="buttons">
            news
            </li></a>
            <li class="separator"></li>
            <a href="#" id="contact" class="showLink" onclick="showHide('example9');return false;"><li class="buttons">
            contact us
            </li></a>
            <li class="separator"></li> 
            </p>
         </ul>       
        </div>
       </div> 

正文:

body
{
    background-image:url('slicingimage/background.jpg');
    background-repeat:none;
    background-size:100%;
    z-index:-1;
} 

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
}

Answer 1

尝试将其添加到正文样式中

margin:0px; padding:0px;