2012-01-08 11 views
2

私はdivのいくつかのコードを持っていて、その中にHTMLでポップアップしています。CSSアブソリュートポジショニングの悪夢とブラウザの違い

私はそれをFirefoxで完璧にして、他のすべてのブラウザ(IEでテストされていない)がオフであることに気付きました。

絶対に配置された要素を扱うブラウザや、ジレンマを修正する方法を教えてもらえますか?

ここにはmy original codeがあり、ここにはmy new codeです。

これは私が見ていますものです:

Photo of differences

+0

私はそれがCSSの位置付けの問題だとは思わないが、ブロックしないように表示を変えれば、divにIEがあることがわかります。 – kidwon

答えて

1

私は間違っていたことを解決しました。私はpタグの周りにdivを作成してから、pの周りのパディングを使用してスペースを計算する前に、完全に機能する更新されたコードを使用していたので、 DEMO


編集: 私は目に見える箱の各外隠さボックスを持っていた(あなたは隠されたものを表示するためにクリックする場所)ので、(私は願っています)

は、コードを更新しました私がそれらを配置しようとしていたときに、DOM内のどこにあるのかを判断するのは容易ではありませんでしたが、を隠してのボックスをそれぞれボックスに入れてposition: relative; CSS子供の箱を配置するプロパティ正確にあなたがそれらをしたい!

CSS

.visibleBox{ 
    position: relative; 
} 

.hiddenBox{ 
    position: absolute; 
    bottom: 0; 
    right:0; 
} 

HTML

<div class="visibleBox"> 
    <p class="hiddenBox">I am hidden sometimes<p> 
</div> 

だから私が言うことをしようとしていることは、私はDIVP外を持っており、これは位置にそれが完全にぎこちない作っていたということですそれはすべてのブラウザで正しく動作しますが、親と子を相対的な絶対的な位置で使用して問題を解決しました。

+0

私はあなたと同じ問題を抱えています。悪夢です...私はあなたの最終的な解決策を理解していません。私はまだ位置がピクセルによって若干異なる理由を理解していません。 –

+0

@ DanielRamirez-Escudero以上の詳細を追加してうまくいけばそれはあなたを助けます。 – jamcoupe

1

すべてのブラウザでは、絶対位置は同じように定義されています。

要素は相対/絶対配置された親または絶対配置されていない親に配置されます。

1

IE9、Chrome 17、FF9でよく見えます。 div#userControlsに相対的な位置を追加すると、親ノードに相対的な絶対ノードの配置が確実に行われます。

+0

div#userControlsに相対的な位置を追加しましたが、まだ違いがあります。私は写真を追加しました。 – jamcoupe

+0

これは私のクロムに見られるものです。 http://www.webpagescreenshot.info/img/626521-18201280912PM – Dean

関連する問題