0

背景画像とリンクを含むブログのヘッダーにある div を AP にしようとしています。Chrome では正しいように見えますが、Safari と Firefox では正しくありません。AP div自体ではなく、他の要素がシフトを引き起こしていると思われますが、何が原因かはわかりません。リセットを使用しています。

私が話していることを示すスクリーンショットへのリンクは次のとおりです。

http://imgur.com/a/hP8dM

ウェブサイトへのリンクは次のとおりです。

http://www.artyst-tyrant.com/blog

私が使用しているcssは次のとおりです。

#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;

}

#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;    
text-indent: -9999px;
}

ここにhtmlがあります

<div id="trex-blog"><a href="http://www.artyst-tyrant.com" title="Artyst Tyrant - Victor Beazzo Designer for Hire">Artyst Tyrant - Victor Beazzo Designer for Hire</a></div>

コーディングの学習に取り組んでいる本業のデザイナーですが、私は決してプロではありませんので、気楽に行ってください。

よろしくお願いいたします。

4

1 に答える 1

0

Win7上のChromev18は、他のブラウザと同じ場所に画像をレンダリングします。おそらく、Chromeでのみキャッシュされたバージョンを閲覧していましたか？

絶対配置要素の唯一の注意点は、それらが相対配置要素にラップされている場合です-その場合、絶対位置は親に対して相対的です-http://css-tricks.com/absolute-positioning-inside-relative-positioning/

私はあなたのソースコードを調べましたが、親要素の位置相対属性に気づきませんでした。

css top属性値を20pxに調整し、現在のすべてのブラウザーで調整しました。

于 2012-05-09T19:35:45.127 に答える