Ошибка IE9? Загадочно растет DIV

У меня есть следующий маленький образец:Ошибка IE9? Загадочно растет DIV

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<style type="text/css"> 
    table.Sample { width: 600px; table-layout: fixed; } 
    table.Sample col { width: 60px; } 
    table.Sample td { height: 20px; line-height: 20px; padding: 0px; } 
    table.Sample input { width: 55px; height: 17px; padding: 0px; margin: 0px; border-width: 1px; } 
</style> 
</head> 
<body> 
    <div id="scrollDiv" style="width: 400px; overflow: auto; background-color: #CCCCCC;"> 
     <table class="Sample"> 
      <colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /></colgroup> 
      <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
      <tr><td><input type="text" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
      <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
     </table> 
    </div> 
</body> 
</HTML>

Это работает нормально на IE8, IE10, Chrome, FireFox, Safari, ... но это ошибки на IE9.

Когда я начинаю печатать в текстовом поле, div растет в высоту. Полоса прокрутки не перемещается, но div растет ниже полосы прокрутки.

Я не могу определить высоту div в css, поскольку количество строк является переменной, и я не уверен, что полоса прокрутки будет присутствовать (поскольку число столбцов является переменным в реальном примере).

Я могу решить проблему со следующим кодом javascript, но мне было интересно, что я делал что-то неправильно, чтобы спровоцировать ошибку.

var div = document.getElementById('scrollDiv'); 
div.style.height = div.offsetHeight + "px";

Благодаря

источник

2013-04-25 Marc

ли Давать '' td' к переполнению: hidden' помочь? –

Нет, это не помогает. – Marc

Проблема заключается с переливом, вы можете это исправить, используя эти правила CSS на вашем scrollDiv

overflow: auto; 
overflow-x:scroll;

посмотреть здесь: http://cssdesk.com/BAYcp

источник

2013-04-25 14:45:34 Andrew

Действительно, это помогает, но в этом случае полоса прокрутки всегда будет видна даже тогда, когда таблица будет достаточно маленькой (по ширине) для окружающего div. (В реальном примере число столбцов является переменным) – Marc

Вы только хотели остановить рост роста ;-), чего именно вы пытаетесь достичь? – Andrew

Это таблица с переменным числом столбцов и строк, но мне нужно только горизонтальную полосу прокрутки, если это необходимо, а не вертикальную. Вы css исправление помогает против ошибки IE9, но я предпочел бы, чтобы горизонтальная полоса прокрутки появлялась только при необходимости. – Marc

Это, как представляется, ошибка в IE9 с тем, как он обрабатывает overflow-x: auto. Добавление дисплея: встроенный блок для css для div работал отлично для меня. Источник:

Internet Explorer 9's magically expanding div

источник

2013-10-10 17:16:22 GendoIkari

Ошибка IE9? Загадочно растет DIV

ответ

Смежные вопросы