IE 9 и выше ведет себя по-разному с элементом таблицы html

Я столкнулся с проблемой ширины ячейки элемента таблицы html. Ширина ячейки таблицы неодинакова в IE8 и IE9. Пожалуйста, найдите приведенный ниже фрагмент кода, где я установил ширину ячейки таблицы, используя таблицу colgroup, и ширину таблицы как 100%.

[Хтмл]

 <table  id="Grid1_Table" class="Table">
   <colgroup>
    <col style="width:20px">
    <col style="width:20px">
    <col style="width:180px">
    <col style="width:200px">
  </colgroup>
 <tbody>
   <tr>
    <td class="RowHeader"><div>&nbsp;</div></td>
    <td class="RecordPlusCollapse" ><div>&nbsp;</div></td>
    <td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
  </tr>
 </tbody>

[CSS]

.RowHeader
 { 
    background-color : black;
 }

 .GroupCaption
 {    
    background-color : #868981;
 }
 .RecordPlusCollapse
 {  
    background-color : red;
 }
 .Table
 {
    width:100%;
 }

Пожалуйста, обратитесь к приведенному ниже файлу скрипта, чтобы проверить проблему с IE8 и IE9.

http://jsfiddle.net/KgfsM/21/

Не могли бы вы проверить это?


html css internet-explorer html-table
person YogeshWaran    schedule 20.02.2013    source источник
comment
Вы используете сброс CSS? Иногда это решает такие кросс-браузерные проблемы.   -  person Ian Hunter    schedule 20.02.2013

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, разметка нарушает табличную модель HTML; если вы попытаетесь проверить фрагмент кода, используя тип документа HTML5 (и добавленный отсутствующий </table>), валидатор сообщит об ошибке «В столбце таблицы 4, установленном элементом col, нет ячеек, начинающихся в нем».

Во-вторых, вы устанавливаете ширину столбцов в пикселях и общую ширину таблицы как 100%. Это представляет собой запрос, который не может быть выполнен, за исключением очень особого случая, когда доступная ширина совпадает с суммой ширины пикселей плюс границы, интервал между границами и интервал между ячейками. Неудивительно, что браузеры по-разному реагируют на это.

Таким образом, вам нужно указать ширину последовательно. Либо удалите параметр ширины 100 %, либо удалите хотя бы один из параметров ширины столбца. У вас все еще может быть проблема (браузеры могут реагировать по-разному даже на это), и table-layout: fixed может не помочь (или может вызвать новые проблемы), но тогда появится новая, относительно четко определенная проблема.

person Jukka K. Korpela    schedule 20.02.2013