FirefoxでCSSの幅を設定する方法

私はWebシステムを作成していますが、Firefoxでは正しく表示されませんが、Google Chromeでもうまく表示されます。Page with errors FirefoxでCSSの幅を設定する方法

問題は私の< 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; 
}

、私はjQueryを使ってJSにいくつかのコードを作成しましたそれを行う。このコードを削除すると、firefoxの緑色の画像の幅は小さくなりますが、それはまだ必要以上に（約100px）大きいので、クロム画像は変更されません。

私はcssの基本を知っています。誰でも私にそれを修正する方法を教えてもらえますか？（しかし、エラーが唯一最大のブラウザ上で注目されている）のコードのために-----

フィドラーURL EDITED

----：ここ

See it on Fiddler

出典

2012-01-13 IPValverde

JSFiddleの例を設定できますか？ – SpaceBeers

興味深いJSFiddle ....私は分でそれをやります – IPValverde

ありがとう。作業がはるかに簡単で、含まれていると多くのヘルプが得られます。 – SpaceBeers

は、私が理解です。

と思われますが、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

あなたの問題を解決したら歓迎します。しかし、私は、209pxはjavascriptであなたの計算幅だと言わなければならない。別のli項目を追加したり、リスト項目の幅を変更したりすると、551pxは自動的に値を変更します（例えば、$ lnTela-menuWidth）もう有効ではありません。 – tuze

ええ、そうです、私はjavascriptでも設定する必要があります。 – IPValverde

ソリューション：あなたul.ulmenu CSSクラスにwidth: 551pxとdisplay: blockを与えます。それが問題を解決します。

理由：理由は、FFとChromeがdisplay: tableを別の方法で処理しているためです。 displayの要素がtableに設定されている場合、FFでは幅にpaddingが追加されますが、Chromeでは適用されません。解決策は、両方のブラウザで同じように動作するdisplay: block CSSプロパティを使用することです（FFとChromeはblock要素の幅にpaddingを追加します）

出典

2012-01-13 12:24:46 techfoobar

すごい！しかし、なぜ551pxに幅を変更しますか？ – IPValverde

「幅」（つまり551ピクセル）と「パディング - 左」（つまり209ピクセル）を合わせると、目に見える幅が760ピクセルになります。 – techfoobar

FirefoxでCSSの幅を設定する方法

答えて

関連する問題