如何使CSS宽度工作在Firefox

我创建了一个Web系统，但它不能在Firefox正常显示（也可能不是在IE中也是如此），但它在谷歌浏览器大，页面是：Page with errors 如何使CSS宽度工作在Firefox

问题是我的< ul>组件在Firefox中太大。我正在使用宽度：760px;并在这760个像素上重复一个小的宽度图像。但火狐做超过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），chrome图片保持不变。

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

---- ----- EDITED

提琴手URL代码（但该错误只注意到了最大化的浏览器）：

See it on Fiddler

来源

2012-01-13 IPValverde

您可以设置JSFiddle示例吗？ – SpaceBeers 2012-01-13 12:07:55

有趣的JSFiddle ....我会在一分钟内做到这一点 – IPValverde 2012-01-13 12:12:29

谢谢。与其合作会更容易，如果包含一个，则可以获得更多帮助。 – SpaceBeers 2012-01-13 12:13:11

这里是我的理解。

似乎，在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");

来源

2012-01-13 12:19:52 tuze

谢谢你的回复男人！但另一个更准确。 – IPValverde 2012-01-13 12:39:59

如果你解决了你的问题，不客气。但我不得不说，209px是你用javascript计算的宽度。 '（“padding-left”，Math.round（（larTela-menuWidth）/ 2）+“px”）;'如果添加另一个li项目或更改列表项目宽度，551px将不再有效。 – tuze 2012-01-13 12:43:22

是的，没错，我必须用javascript来设置。 – IPValverde 2012-01-13 12:46:17

解决方案：给width: 551px和display: block您ul.ulmenu CSS类。这将解决问题。

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

来源

2012-01-13 12:24:46 techfoobar

令人惊叹！但为什么要将宽度更改为551px？ – IPValverde 2012-01-13 12:34:46

因此，“宽度”（即551px）和“填充左”（即209px）一起给出所需的可见宽度760px。 – techfoobar 2012-01-13 12:37:40

如何使CSS宽度工作在Firefox

回答

相关问题