IE 7 полосы прокрутки при использовании PIE поведения закругленных углов - PullRequest
Новая
       33

IE 7 полосы прокрутки при использовании PIE поведения закругленных углов

1 голос
/ 28 февраля 2012

Описание проблемы

  • Версия браузера: только IE 7 (или режим совместимости)
  • Вариант использования: поле с закругленными углами с использованием функции PIE (http://css3pie.com), которая содержит прокручиваемый div
  • Проблема: невозможно прокрутить с помощью маркера перетаскивания

Временные решения

Вы можете рефакторинг содержимого DIV - некоторые структуры создают проблему, некоторые - нет.Это не совсем жизнеспособное решение, так как оно будет временным. Я мог бы решить проблему сейчас, и какой-то другой разработчик мог бы добавить к тому, что я сделал, и сломать ее снова.

Вариант использования

Я пытаюсь провести рефакторинг группы портлетов (или прямоугольников с закругленными углами, которые имеют синий заголовок), чтобы использовать простую структуру CSS 3 и использовать поведение PIE в IE 7 и 8. Старый код использовал сложную структуру HTML с использованием фоновых изображений.

Я удалил столько лишнего HTML и CSS из кода примера, но первоначально портлет содержал таблицу «комбинированных окон». Поле со списком - это поле ввода, котороеt работает как выпадающий список (в котором есть кнопка переключения, которая показывает всплывающее окно, показывающее подсказки для автозаполнения).После обновления HTML портлета (и не касаясь содержимого) теперь в IE 7 содержимое больше не прокручивается при перетаскивании ручки прокрутки.

Шаги воспроизведения

1 Ответ

0 голосов
/ 28 февраля 2012

Я изменил ваш код, как показано ниже, и он работает в режиме браузера IE 7 IE (у меня не было установленного IE 7, поэтому я попытался использовать режим браузера IE7 из инструмента разработчика IE 9, я смог воссоздать вашу ошибку с помощьюто же самое)

В основном я удалил вложенные пролеты (я удалил 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>
...