使用PIE行为圆角时IE 7滚动条问题

时间:2012-02-27 21:43:34

标签: css internet-explorer-7 scrollbar css3pie

问题描述

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

变通方法

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

用例

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

我从示例代码中删除了尽可能多的不必要的HTML和CSS,但最初portlet包含一个“组合框”表。组合框是一个输入框,其功能类似于下拉菜单(其中有一个切换按钮,显示弹出窗口,显示自动完成建议)。在IE 7中更新portlet HTML(而不是触及内容)后,拖动滚动句柄时内容不再可滚动。

复制步骤

1 个答案:

答案 0 :(得分: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>