0

絶対に配置されたDIVに問題があります。ブラウザ間でまったく同じ場所に配置されていません。問題は、ほとんどのコンテンツがJSPファイルによって生成されており、CSSを適用して、このファイルの外部のCMSにコンテンツを作成する必要があることです。コードの構造は次のとおりです。

                <div id="automatic-container">
                 <div class="one">
                 <div class="oneWeird"></div>
                 <div id="content-container">
                     <div id="some-content1"></div>
                     <div id="some-content2"></div>
                 </div>
                <div id="absolutely-position">plain text is inserted here via JSP file, wrapped only in div tags. adding/styling p tags does not help</div>  
                </div>
                </div>

「content-container」以外はすべて、JSPファイルによって自動的に生成されます。「絶対位置」divのコンテンツは、「コンテンツコンテナ」のコンテンツの上に配置し、特定の場所に配置する必要があります。oneWeirdは、JSPによって作成されたdivであり、私が知ることのできる目的を果たしていないようです...

次のCSSを適用しましたが、すべてのブラウザーで絶対位置DIVが数ピクセルずれています（Chrome、IE7、8、9、FF、Safariを確認しました）。Chrome、Safari、IE8で一致します。FFでは約3ピクセル高く、IE 9では5ピクセル高く、IE7では約10ピクセル低くなっています。

                #automatic-container{position: relative; padding: 0px; margin: 0px auto;}
                #automatic-container div.one {position: relative; padding: 0px; margin: 0px auto;}
                #automatic-container div.one div.oneWeird{display: none;}
                #content-container{margin: 0px auto; width: 848px; height: 354px; background:url('bkg_confirm.jpg') no-repeat; font-family: Helvetica,Arial,sans-serif; position: relative; padding: 0;}
                #some-content1{position: relative; margin: 0px; text-align: center; padding: 0; width: 490px; height: 354px; left: 343px; top: 30px;}
                #some-content2 {position: relative; width: 490px; height: 55px; border-top: 1px solid #cccccc; padding: 0px; margin: 60px 0 0 0; overflow:hidden;}
                #absolutely-position{height: 20px; left: 420px; position: absolute; text-align: center;top: 125px; width: 465px;font-weight: bold; padding: 0px; margin: 0px;}

ブラウザ間でDIVの絶対位置を一貫させる方法についてのアイデアはありますか？SOや他の場所で見つけた記事はどれも役に立ちませんでした。ポジショニングを相対に変更してz-indexを使用しようとしましたが、一貫性のない結果も生成されました。オンライン検証を実行しても、コードはクリーンです。

助けてくれてありがとう。

4

1 に答える 1

0

通常のcssを適用する前に、リセットを適用します：http: //meyerweb.com/eric/tools/css/reset/またはNormalize.csshttp : //necolas.github.com/normalize.css/。私はあなたが直面しているのは、さまざまなブラウザが使用するさまざまなデフォルトスタイルであることをほぼ保証します。

リセットとは、独自のスタイルの適用を開始する前に、すべてのスタイルをベースラインに設定することです。したがって、Chromeが要素にxのマージンを適用し、IEがYの量を適用すると、リセットによって両方が0になります。欠点は、使用するすべての要素のスタイルを変更する必要があることです。たとえば、リストにはデフォルトのスタイルがなくなり、引用符などもブロックされなくなりました。

Normalize.cssは、リセットと同じようにすべての基本スタイルを設定するため、初心者にとっては少し使いやすくなっていますが、ほとんどの場合、0に設定するのではなくスタイルを提供するため、リストは弾丸でインデントされますが、すべてのブラウザで同じように見えます（またはそうすべきです）。

于 2012-10-24T20:57:02.087 に答える