2013-04-23 3 views
0

Я думаю, что следующий код должен объяснить проблему.Почему Internet Explorer 9/10 игнорирует ширину столбцов при использовании colspan?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
body { padding-bottom: 24px } 
table { table-layout: fixed } 
</style> 
</head> 
<body> 

<table class="question" id="TR09_tab" border="0" cellpadding="0" cellspacing="0" width="100%"> 
<colgroup> 
    <col width="22"> 
    <col width="110"> 
    <col> 
</colgroup> 
<tr> 
    <td><input name="one" id="one" value="yes" type="checkbox"></td> 
    <td colspan="2"><label for="one">Option 1</label></td> 
</tr> 
<tr> 
    <td><input name="two" id="two" value="yes" type="checkbox"></td> 
    <td colspan="2"><label for="two">Option 2</label></td> 
</tr> 
<tr style="display: none"> 
    <td colspan="2"><label for="text">Text:</label></td> 
    <td><input name="text" id="text" type="text" value="" style="width: 98%"></td> 
</tr> 
</table> 

</body> 
</html> 

Проблема: первый колонок визуализируется намного больше, чем 22px.

Примечание: я не могу использовать фиксированную ширину для таблицы, потому что в основе таблицы лежит переменная ширина.

В третьей строке установлен дисплей: нет, потому что он будет показан (через JavaScript), как только будет выбран один из вариантов. Как только эта строка будет показана, все значения col-width будут абсолютно правильными.

Я уже столкнулся с проблемами с определениями col-width и IE при использовании colspan в других контекстах - однако это первый случай, когда ширина для незапущенной ячейки игнорируется.

  • Почему IE 9/10 просто игнорирует определения моих коллег в этом случае?

  • Любые предложения, чтобы решить проблему, если я не могу изменить структуру таблицы (то есть, мне нужны эти три colums и colspans)?

Большое спасибо!

+0

http://stackoverflow.com/questions/13522196/ie9-0-and-colgroup-colspam-issue –

+0

Даже если я удаляю последнюю строку, валидатор W3C не сообщает об ошибке. Кроме того, код в другом столбце не * определяет * любые ширины столбцов. Я могу быть просто слепым, но я не понимаю! – BurninLeo

ответ

1

Кажется, что IE путается со структурой таблицы, когда у вас есть display: none в последней строке. Если вы удалите этот параметр, ширина изменится. Без этой строки таблица нарушает модель таблицы HTML (в качестве отчетов валидатора, если вы действительно удаляете строку из разметки и указываете валидатору на проверку HTML5, где обнаружены ошибки модели таблицы).

Вещи меняются, если вы замените display: none на visibility: collapse, хотя эта настройка не поддерживается некоторыми старыми версиями IE.

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

+0

Опять же, я проверил код * без * последней строки в http://validator.w3.org/#validate_by_input, и он дает мне «Действительный» (хотя есть два предупреждения для отсутствующей кодировки символов). В любом случае, спасибо за подсказку «видимость» - это сразу решает проблему :) – BurninLeo

+0

Извините, я забыл сказать, что валидатор сообщает о проблеме *, если в режиме HTML5 *. Требования к модели HTML-таблицы не могут быть выражены в DTD, поэтому они сообщаются только в валидации HTML5. Я отредактирую свой ответ. –