适合CSS中的div

Question

大家好，我的菜单栏无法放入不同浏览器的<div>区域。我已经检查过Opera和Chrome它看起来很好但是使用Explorer和Firefox我的菜单不合适。

我的菜单位于此<div>标记中：

.page {
     width: 964px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

这是我的菜单：

ul#menu {       
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: center;       
}

ul#menu li {
    display: inline;
    list-style: none;
    font-family: 'Museo300Regular';
    font-size:17px;
    font-style:normal;        
}
ul#menu li a 
{        
    background-image:url(../../images2/images/menu_bg_normal.jpg); 
    background-repeat: repeat;
    padding: 5px 19px 5px;        
    font-weight: normal;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #FEFEFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
      cursor:pointer;          
}

那么为什么它不适合Explorer和Firefox会出现什么问题呢？

我附上你可以理解我的意思的图像

这是适合的Chrome和Opera

Answer 1

文本将始终占用不同浏览器的不同空间（甚至在不同计算机上的同一浏览器中）。

因此，如果您希望菜单完全适合，则不能将按钮的宽度直接基于其中的文本。使所有按钮的宽度相同，或为每个按钮指定精确的宽度。

或者，可以使用表格，该表格可以根据单元格的内容划分单元格之间的空间。

Answer 2

您可以通过重置your CSS code来实现这一目标。然后使用ul li设置列表项的样式 如果需要，您可以使用条件注释来加载IE样式表，并修复某些错误。

但通常我可以在li元素的所有浏览器中获得100％的精确结果，因此证明了这一点。