position - 異なるブラウザ間でのポジショニング

Question

ページ上で独自のレベルにある要素が、ブラウザごとに異なる位置に配置されるという問題が発生しました。でのスライドショーです。 http://nevillebeandesign.com/Tattoo/bobShaw.html Safariでは、FirefoxやChromeよりも数ピクセル高く、Operaでは大幅に低くなっています。背景画像の赤い線と重ならないようにサイズを小さくする必要がありました（元々Safariでは2本の赤い線の間にぴったりと収まりました）。さまざまなブラウザの位置を調整するために、ドキュメントヘッドに配置できる修正はありますか？ありがとう！

Answer 1

この問題は、セル内に挿入されている、使用している<object>要素にいくらか関連しています。また、古いマークアップ構造（表形式）に依存しているため、多くの古い癖が出てきます。基本的に、CSSでは要素はインラインブロックと呼ばれます。これは、vertical-alignプロパティを受け入れることができることを意味します。ただし、あなたの場合、align属性（非推奨）を使用しているため、ブラウザーに内部アルゴリズムの使用を強制します。そのため、さまざまなブラウザで異なる垂直方向の配置が表示されます。これを修正するには、オブジェクトの要素に指定された高さを指定し、「vertical-align：middle」CSS宣言をオブジェクト自体に適用してみます。オブジェクトのコンテナに適切な「行の高さ」を設定することもできます。