Question

我正在创建一个网络系统，但它在Firefox中没有正确显示（也可能不在IE中），但在Google Chrome浏览器中它很棒，页面是：{ {3}}

问题是我的 ＆lt;在Firefox中，ul＆gt; 组件太大了。我使用 width：760px; 并在此760像素上重复一个小宽度图像。但是firefox以超过760像素的速度执行此操作（正如您在链接中看到的那样）。

这是我的ul-html代码：

<body id="maincontent">
    <ul class="ulmenu">
        <li><a href="#" >Registrar</a></li>
        <li><a id="lastmenu" href="#" >Realizar login</a></li>
    </ul>
</body>

我的css：

root { 
    display: block;
}
#maincontent
{
    background-color: black;
    width: 760px;
    margin: auto;
}
ul.ulmenu
{
    text-align: center;
    margin-top:0;
    display:table;

    width: 760px;
    max-width: 760px;
    list-style-type: none;
    height: 60px;

    background-image: url(../image/menubg.png);
    background-repeat: repeat-x;
    /*
    visibility: hidden;*/
}
ul.ulmenu li
{
    float: left;
}
ul.ulmenu a
{
    background-image: url(../image/menudiv.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 32px;
    padding-left: 32px;
    line-height: 60px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 21px;
}
ul.ulmenu a:hover
{
    color: #AAAAAA;
}

为了使菜单的选项集中，我在JS中用jQuery创建了一些代码来做到这一点。如果我删除此代码，firefox中绿色图像的宽度会变小，但它仍然比必要的大（约100px），铬图像保持不变。

我只知道CSS的基础知识。任何人都能指出我如何解决这个问题？

---- ----- EDITED

代码的Fiddler URL（但错误仅在最大化浏览器上注意到）：

Page with errors

Answer 1

这是我的理解。

似乎，在Firefox中，您正在为您的元素样式添加padding-left，这会使其更宽。

ul.ulmenu li
{
    float: left; //remove it
    display: inline-block; // add it
}

从js代码中删除此行。

$(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");

Answer 2

解决方案：将width: 551px和display: block提供给ul.ulmenu CSS课程。这将解决问题。

原因：问题的原因是FF和Chrome以不同方式处理display: table。对于display设置为table的元素，FF会将padding添加到宽度，而Chrome则不会。解决方案是使用两个浏览器中行为相同的display: block CSS属性（FF以及Chrome将padding添加到block元素的宽度）

如何在Firefox中使CSS的宽度工作

2 个答案: