chromeのcss位置ズレについて

質問

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の２つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか？
どなたか教えていただけますでしょうか。

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

-----------------------

body:nth-of-type(1) #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}

-----------------------

@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
}

回答No.1

abacabu · ベストアンサー

趣味でWEBサイトを作成している者です。
あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ？
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥（数字が小さい１）手前（数字が大きい１０）というｚ軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。

回答No.2

ORUKA1951

HTMLの抜粋がないので何をしたいかいまひとつわからないのですが？
absoluteは、親コンテナブロックがstatic以外のとき、親ボックスに対しての絶対配置ですが、一部ブラウザはrelativeに似た挙動をするものがあります。
また画像入れているものをブロックと判断して上下にマージンをとるものもあります。きちんとCSSを理解して対策をすればハックの必要はないはずですが？
★きちんと標準モードで動作するようにDOCTYPEを記述する。
★画像を含むそのコンテナブロック内の位置をrelativeないabsoluteなどで指定する。
★その子供要素に関してmarginやpaddingはいったん0にしておく。
とか・・
div.section{padding:0;position:relative;}
div.section p.image{position:absolute;margin:0;padding:0;tip:0px;left:0;z-index:1;}
とか・・