2012-01-05 7 views
0

私はdivのシリーズであるnavメニュー、メニューリンクを持つdiv、そして2px幅の 'separator bar'画像を含む 'menu separator' divを持っています。区切りdivの幅は24pxなので、適切な区切りを形成します。さまざまなブラウザで異なるアラインメント

「メニューリンク」の一部で

のdivは私が<\li>で定期的なホバードロップダウンを持っているメニューの親のdivとドロップダウンで同じ幅をS「のjQueryを使用して、Sなど、私は<\li>の幅にする」を次に、24pxを追加して(2つの区切り文字の区切り記号の画像に拡張して配置します)、左の位置を追加して、ドロップダウンの境界線が区切りバーから伸びているように見せます。

Firefoxではすべて問題ありません。しかし、ChromeやIEでは、ときどきうまくいきますが、時にはそうではありません。メインメニューリンクのdivの内容に応じて、ドロップダウンが1つのピクセル(時には10ピクセルなど)によって誤って整列されることがあります。 FFでは、メニューリンクの内容が何であっても毎回正しく表示されます。 IEとChromeでは、内容によって異なります。例えば。メニューリンクのdiv内の「アートワーク」は、ドロップダウンが完全に並んでいることを意味しますが、同じdiv内の「アートワークショップ」は、ドロップダウンが1ピクセルまたは2ピクセルずれている可能性があります。しかし、FFでそれはすべていいです...

これはなぜ、または何が修正されるかもしれない何か提案がありますか?ブラウザーには異なるピクセルの異なる文字が表示されていますか? IE/Chromeでは何らかの理由でjQueryの幅がFFよりも異なっていますか?

私のコードは少し厄介で、画像が含まれていますので、私は簡単に...まだ

編集を例を示すことができない、まだWeb上ではありません:あなたは例を見ることができる、そしてどのようにそれをすべてのブラウザで異なるコンテンツを表示すると、http://jsfiddle.net/jaslfpihdaddle/aFAF9/7/に表示されません。誰かが私にどのように愚かであるか教えてくれることを願っています。マニュアルを読むと簡単に修正できます! ;)

+1

ウェブ開発へようこそ!コードなしではあまり役に立ちませんが。 –

+0

pastebin.comにコードを追加します。おそらくCSSが問題です...あなたのトラブルではあなたに評決を与えることはできません:) –

+1

[this](http://meta.stackexchange.com/questions/18584/how-to-ask-a-smart-質問)よく質問をする方法を知り、 'css'、' javascript'やブラウザ関連の質問をする場合は、[jsfiddle](http://www.jsfiddle.com)リンクを作成してください。 –

答えて

0

問題は、margin:autoがIEでそれを台無しにしていたことでした。だから私は、jQueryがドロップダウンがマージンの代わりにページに集中しているdivを作るようにするつもりです:auto、そしてすべてはOKです! :)

(ただし、IEはまだFF、Chrome、Safariとは異なる幅になります...)

関連する問題