インターネットエクスプローラで別の部門のDivスリップ

Question

ビデオプレイリストの下部に、ビデオの説明（背景の黒色）を20ピクセル下に移動する必要があります。 Firefoxでウェブサイトを表示すると、そのことが分かりやすくなります。

#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; } 
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; } 
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; } 
#content #videos .playlist .entries .playing { background-position:0px -80px; } 
#content #videos .playlist .entries .paused { background-position:-432px -80px; } 
#content #videos .playlist .entries .progress { opacity:0.8; } 
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; } 
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; } 
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; } 

Answer 1

上記のいずれの提案も機能しませんでした。私はmargin-left:-20pxで解決しました。嫌いなインターネットエクスプローラ！

Answer 2

IE6/7は、混合フロートと絶対位置との問題を有している[リンクはもはや動作していません]。私は（20個の ピクセルが上がっ）IEのスクリーンショットと正確に 同じそれを参照してくださいあなたのリンクが壊れているposition:absolute

Answer 3

#content #videos .playlist .entries .description pから、正しいURLは、Firefox 3.5ではhttp://pangeaadvisors.org/SS.jpg

• する必要があります削除してください。私はそれがベース になく、IE6と同じですが、スクロール中に、いくつかの不具合 と
• とIE7左に20ピクセルに揃え参照IE6で
• 。

firefoxでは、最初の2つのアイテムはミスしてしまいますが、プレイリストの3番目のアイテムは正しく表示されます。要因の影響はタイトルの長さです。長いタイトルは上手く表示され、20pxのギャップで短くなり、行の高さはタイムスタンプを押し下げます。

タイトルを囲む「ビデオ」の内側に別のdivを追加し、オーバーフローで非表示の高さと幅を定義すると、他のdivと異なる高さのブロックの問題を標準化して停止する必要があります。あなたはその後、CSSのカップルを使用することができ、これが行わ付き

は少しダウンして汚いが、うまく動作するはずです

position:relative; 
top:XXpx 

を使用して、任意の誤動作ブラウザのルールを記述するためにハッキング。私は実際に私のブラウザで問題を再現することができないので、より具体的にすることはできません。