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;

Answer 2

你已经要求leftColumn div为100％高度，如果它或正文有任何边距或填充，它将占用超过100％并需要滚动条。

body, div  {
    margin: 0px;
    padding: 0px;
}

我建议使用css reset来减少此类问题