4

Chome や IE と比較して、Firefox で HTML 要素が異なる場所に表示される理由がわかりません。position:absolute を使用して、タイトルとサブタイトルのテキストをヘッダーに配置したい場所に配置していますが、FF と Chrome/IE の間でテキスト要素の水平位置に約 30px の違いがあるようです

HTML は単純で、次のようになります。

<div id="mainPage">
<div id="mainContent" class="mainRounded">
    <div id="header">
        <div id="title"><h1>Longer Title Text</h1></div>
        <div id="subtitle"><h2>Subtitle text</h2></div>
        <div id="banner"></div>
    </div>
</div>
</div>

そしてCSSはこれです：

.mainRounded {
margin: 0 auto;
width: 1000px;
border-radius: 30px;
background-color:#e9d7dc;
box-shadow: 5px 5px 3px #888888;
overflow:hidden;
margin-bottom: 25px;
}
#header #banner {
background-color: #0033CC;
height: 150px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
position: relative;
overflow:hidden;
border-radius: 30px 30px 0 0;
}
#header #title {
padding: 0 ;
position: absolute;
top: -40px;
left: 710px;
}
#header #subtitle {
padding: 0 ;
position: absolute;
top: 95px;
left: 870px;
}
#header #title h1 {
font-family: Georgia;
    font-size: 54px;
    font-style: italic;
    font-weight: normal;
text-shadow: 2px 2px 5px #0033CC;
}
#header #subtitle h2 {
font-family: Georgia;
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
}

これは、次のテスト ページでその場で確認できます 。

4

3 に答える 3

1

に与える必要がありposition: relative;ます.mainRounded。その後、マージントップの他の位置の値でトップのマージン値を0に修正すると、希望どおりに機能する必要があります。

于 2013-03-20T04:11:02.333 に答える
0

FF 16 と Chrome 25 でテスト ページを確認しました。両方のブラウザで DIV 要素が正しく配置されています。

ただし、H1 と H2 のテキストは異なってレンダリングされているように見えます。これが、水平方向の位置が異なるように見える理由かもしれません。

これをチェックしてください：https://stackoverflow.com/a/5082824/1443797

于 2013-03-20T00:49:04.020 に答える
0

ブラウザごとに、HTML スタイルの表示に対する動作が異なります。CSS をリセットする必要があります。

http://developer.yahoo.com/yui/reset/と特に IE IE Stylingが役立つことを願っています

于 2013-03-20T00:46:57.297 に答える