如何使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

回答

相關問題