0

画面に div の内容を表示し、ウィンドウの高さに収まるように、overflow <div>:hiddenを使用しています。height:100%

これは Chrome と Safari で動作します。

overflow:hiddenIE9 は私の divを尊重しないheight:100%ため、div を展開してコンテンツを表示するだけです。

私のページには、次のDoctypeがあります

<!DOCTYPE HTML>

これは、最新の規格に準拠していることを示す必要があります。

Doctype を完全に削除すると、Doctype が指定されていないためにフォントが大きすぎることを除いて、すべてのブラウザーですべて正常に動作します。

これが起こっている理由は何ですか？html および body タグは、css スタイルシートで height:100% として指定されています

<div style="overflow:hidden;height:100%">
content too tall to fit height of the screen, so a scroll bar is added.  In IE9 it doesn't work because it just extends the height of the DIV
</div>

編集：IE9で問題を完全に再現できる完全なHTMLを含めました

<!DOCTYPE html>
<html>
   <head>
     <style>
      * { /* Resetting the defaults */
          margin: 0;
          padding: 0;
      }

      html, body { /* Assigning Height To Containers First */
          height: 100%;
      }

      table
      {
        height:100%;
        width:100%;
        border-collapse: collapse  
      }

      .headerRow
      {
        height:50px;
      }

      .sidePanelTd
      {


      }

      .sidePanelDiv
      {
        overflow:auto;
        height:100%;
      }

      .row2
      {

      }

     </style>
</head>
<body style="background-color:White;overflow:auto">
    <table border=0 cellpadding=0 cellspacing=1 id="mainTable">
    <tr class="headerRow">
        <td valign=top colspan=2>Header
        </td>
    </tr>

    <tr class="row2">
        <td>
        td 1
        </td>

        <td class="sidePanelTd">
           <div class="sidePanelDiv">
              td 2 content <br>too <br>tall <br><br><br><br><br><br>
              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
              <br><br><br><br><br><br><br><br><br><br><br><br>to fit height of the screen, 
              so a scroll bar is added.  In IE9 it doesn't work because it just extends 
              the height of the DIV
            </div>
        </td>
    </tr>

</table>

</body>
</html>
4

3 に答える 3

2

これは私が試したもので、動作します

<!DOCTYPE html>
<html>
   <head>
     <style>
      * { /* Resetting the defaults */
          margin: 0;
          padding: 0;
      }

      html, body { /* Assigning Height To Containers First */
          height: 100%;
      }
     </style>
</head>
<body>
   <div style="overflow:hidden;height:100%">
      content <br>too <br>tall <br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br>to fit height of the screen, 
      so a scroll bar is added.  In IE9 it doesn't work because it just extends 
      the height of the DIV
    </div>
</body>
</html>

あなたがコメントしたように、これを追加する必要があります

table, tr, td {
    height: 100%;
    border-collapse: collapse;
}
于 2013-03-11T15:29:13.907 に答える
0

ページの何かが quirksmode をトリガーしている可能性があります。 <meta http-equiv="X-UA-Compatible" content="IE=edge" />(この投稿から) 設定を試してみるか、このページでいくつかのヒントを見つけることができます。

于 2013-03-11T15:29:27.900 に答える
0

動作するはずです.DOCTYPE宣言の上にコメントやコードがないことを確認してください.これもIEがQuirksモードになるためです. また、念のため追加して<meta http-equiv="X-UA-Compatible" content="IE=edge" />ください。

于 2013-03-11T15:31:27.097 に答える