1

问题描述

  • 浏览器版本：仅限 IE 7（或兼容模式）
  • 用例：使用包含可滚动 div 的 PIE (http://css3pie.com) 行为的圆角框
  • 问题：无法使用拖动手柄滚动

解决方法

您可以重构 DIV 的内容——有些结构会给出问题，而有些则不会。这不是一个真正可行的解决方案，因为它只是暂时的。我现在可以解决这个问题，其他一些开发人员可能会添加我所做的并再次破坏它。

用例

我正在尝试重构一堆 portlet（或具有蓝色标题的圆角框）以使用简单的 CSS 3 结构并在 IE 7 和 8 中使用 PIE 行为。旧代码使用了使用背景图像的复杂 HTML 结构。

我已经从示例代码中删除了尽可能多的不必要的 HTML 和 CSS，但最初的 portlet 包含一个“组合框”表。组合框是一个输入框，其功能类似于下拉菜单（它有一个切换按钮，显示一个弹出式点击，显示自动完成建议）。现在在 IE 7 中更新 portlet HTML（并且不接触内容）后，拖动滚动句柄时内容不再可滚动。

复制步骤

4

1 回答 1

0

我修改了您的代码如下，它在 IE 9 的 IE 7 浏览器模式下工作（我没有安装 IE 7，所以我尝试使用 IE 9 的开发人员工具中的 IE7 浏览器模式，我能够使用相同的方法重新创建您的错误）

基本上，我删除了嵌套跨度（我删除了 3 个嵌套跨度并保留了主跨度）

我不确定当你有嵌套跨度时它不工作的原因，但这是我在查看你的代码并删除它似乎工作时注意到的一件事。

<!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 回答