絶対位置のGクロムでの要素の整列

赤い四角形が緑色と重なり合って欲しいです。 FF、IE、Operaではすべてうまく動作しますが、Chromeの赤い四角形は中央ではなく左に揃えてあります。また、私はブックマークレットを作って他のページ要素を変更することができないので、#parent divとその子にのみ影響します。絶対位置のGクロムでの要素の整列

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <title></title> 
    <style type="text/css"> 
     #center { text-align: center; } 
     #parent { 
      position: absolute; 
      display: inline; 
     } 
     #nested { 
      background-color: #c00; 
      width: 280px !important; 
      height: 210px !important; 
     } 

    </style> 
</head> 
<body> 
    <div id="center"> 
     <div id="parent"><div id="nested"></div></div> 
     <div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div> 
    </div> 
</body> 
</html>

お願いします。

クロムのプロパティについて詳しく説明すると、#parentの位置を絶対位置に設定すると、クロムが強制的に表示をブロックすることがわかりました。それをインラインにするには？

出典

2011-03-07 Andrey

私は、これはあなたが尋ね視覚だと思う：私は#parentと#nestedのためのCSSを変更し

。
IE7/IE8、Firefox、Chrome、Opera、Safariで同じように見えます。

Live Demo

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <title></title> 
    <style type="text/css"> 
     #center { text-align: center; } 
     #parent { 
      position: absolute; 
      left: 0; 
      right: 0; 
      /*top: 0;*/ 
      text-align: center 
     } 
     #nested { 
      background-color: #c00; 
      width: 280px !important; 
      height: 210px !important; 
      display: inline-block 
     } 

    </style> 
</head> 
<body> 
    <div id="center"> 
     <div id="parent"><div id="nested"></div></div> 
     <div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div> 
    </div> 
</body> 
</html>

出典

2011-03-07 10:39:58 thirtydot

表のセルに#center置く場合は動作しません。 – Andrey

@Andrey：あなたはこれまで言及していませんでした。あなたは '＃parent'に' position：absolute'を使っています - もちろん、テーブルセルの中では "動作しません"。あなたは '＃center 'に' position：relative'を追加することで修正できますが、あなたによれば、それはできません。 – thirtydot

これは問題です - 正確なケースではこの問題を解決できますが、コンテキストがわからないとするのは難しいです（ – Andrey

絶対位置のGクロムでの要素の整列

答えて

関連する問題