1

問題の説明

  • ブラウザバージョン：IE 7のみ（または互換モード）
  • ユースケース：スクロール可能なdivを含むPIE（http://css3pie.com）動作を使用した角の丸いボックス
  • 問題：ドラッグハンドルを使用してスクロールできない

回避策

DIVの内容をリファクタリングできます。一部の構造では問題が発生し、一部では発生しません。これは一時的なものであるため、実際には実行可能なソリューションではありません。私は今問題を修正することができました、そして他の開発者が私がしたことを追加して再びそれを壊すかもしれません。

使用事例

単純なCSS3構造を使用し、IE 7および8でPIEの動作を使用するために、一連のポートレット（または青いヘッダーを持つ丸みを帯びたコーナーボックス）をリファクタリングしようとしています。古いコードは、背景画像を使用した複雑なHTML構造を使用していました。

サンプルコードから不要なHTMLとCSSをできるだけ削除しましたが、元々、ポートレットには「コンボボックス」のテーブルが含まれていました。コンボボックスは、ドロップダウンのように機能する入力ボックスです（オートコンプリートの提案を示すポップアップonclickを表示するトグルボタンがあります）。IE 7でポートレットHTMLを更新した後（コンテンツに触れていない場合）、スクロールハンドルをドラッグしたときにコンテンツをスクロールできなくなりました。

複製手順

4

1 に答える 1

0

以下のようにコードを修正し、IE 9 の IE 7 ブラウザ モードで動作します (IE 7 をインストールしていなかったので、IE 9 の開発者ツールから IE7 ブラウザ モードを使用してみました。同じものを使用してバグを再現することができました)。

基本的に、ネストされたスパンを削除しました（ネストされた3つのスパンを削除し、メインスパンを保持しました）

ネストされたスパンがあるときに機能しない理由についてはわかりませんが、コードを見て、それを削除しているときに気づいたことが 1 つあります。

<!DOCTYPE HTML>
    <html>
    <head>
    <style>
      .box {
          padding: 10px;
          width: 600px;
          behavior: url(PIE.htc);
          border: 1px solid black;
          border-radius: 10px;
          background-color: white;
      }
      .scroller {
          overflow: auto;
          *overflow-x: auto;
          *overflow-y: hidden;
          *padding-bottom: 17px;
      }
      .box input {
          width: 320px;
      }
      .combo {
          white-space: nowrap;
      }
    </style>
    </head>
    <body>
      <div class="box">
        <div class="scroller">
          <table>
            <tr>
              <td>
                <div>
                  <span class="combo"><input /></span>
                </div>
              </td>
              <td>
                <div>
                  <span class="combo"><input /></span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </body>
    </html>
于 2012-02-27T22:03:01.523 に答える