8

計算さ<div>れた高さプロパティが 633px になる Web ページがあります。これは、インラインかどうかに関係なく、どのカスケード スタイル シートにも設定されておらず、JavaScript にも設定されていません。コード内のあらゆる場所を検索しましたが、番号 633 はどこにも表示されません。必要な高さを設定することでこれを解決できstyle="height: 420px;"ますが、IEはこれをデフォルトで他のブラウザーでも取得する633pxにオーバーライドするようです。Google Chrome と Firefox/Firebug の両方で、div の実際のコンテンツの高さが 633 ピクセルに近くないことを確認しました。この計算された高さの理由を知る方法はありますか? 完全を期すために、Google Chrome が のスタイル プロパティとして報告するものを次に示し<div>ます。

Computed Style
background-color: white;
display: block;
float: left;
height: 633px;
margin-left: 30px;
margin-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 830px;

Inline Style Attribute
margin-left: 30px;
margin-top: 20px;

#overview
background-color: white;
float: left;
padding: 0px;
width: 830px;

#overview, #overviewempty
margin-top: 9px; (is crossed out)

div
display: block;

前もって感謝します。

編集：

問題の div には 2 つの div が含まれており、1 つの div には 1 行のテキストが含まれ、1 つfont-size: 16px;の div には高さが 367px あります。

別の編集：

さて、これの原因がわかりました。メイン div に含まれる 2 番目の div には、1 つの画像と、position: relative; top: -335px;. Internet Explorer は、この要素が空白になるスペースを保持します。それを回避する方法はありますか？

最終編集：

解決しました！フローティング div の内容を でposition: relative2 番目の divにラップしましたposition: absolute。これにより、メイン画像の下の空白が取り除かれます:) 最終的な HTML は次のようになります。

<div id="overview">
  <div>Some text>
  <div>
    <img src="someImage.jpg">
    <div style="float: right; position: relative; top: -335px;">
      <div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;">
        Some floating contents
      </div>
    </div>
  </div>
</div>
4

4 に答える 4

3

IE Developerツールバーと同じように、Firefox用のFirebugを見てください。

これにより、要素に適用されるすべてのスタイルがわかり、どのスタイルがオーバーライドされたかがわかります。

于 2009-03-24T09:40:17.133 に答える
1

要素の高さは通常、そのコンテンツによって決まります。そこに 633px 相当のテキストやその他のものがありますか?

計算されたスタイルは、必ずしもスタイル シートまたは JavaScript から取得されるとは限りません。これは、レンダリング エンジンがすべての計算を終了した後のスタイルの最終的な結果です。

于 2009-03-24T09:33:24.027 に答える
1

Internet Explorer 用のIE Developer Toolbarをインストールします。人生がずっと楽になることもあります。編集: IE の新しいバージョンには、デフォルトで開発者ツールが含まれており、F12 を押すとアクセスできます。

于 2009-03-24T09:37:38.403 に答える