IE10 table-layout: исправлено нарушение, если используется colspan

Следующий HTML-код идеально подходит во всех распространенных браузерах, включая IE7-9, но не работает в IE10. Даже при запуске IE10 в режиме совместимости он терпит неудачу.IE10 table-layout: исправлено нарушение, если используется colspan

<html> 
    <body> 
     <table style="table-layout:fixed;width:500px"> 
     <colgroup> 
      <col style="width:100px" ></col> 
      <col ></col> 
      <col style="width:100px" ></col> 
      <col ></col> 
     </colgroup> 
     <tbody> 
      <tr> 
       <td colspan="2"> 
        <div style="background:red;"> red </div> 
       </td> 
       <td colspan="2"> 
        <div style="background:green;"> green </div> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

В то время как во всех других браузерах на 2 ячейки равны по размеру, на IE10 (по крайней мере, при работе на Windows7) первая ячейка шире, чем второй.

Этот HTML в IE 9/Windows 7:

In IE 9

же HTML в IE 10/Windows 7:

In IE 10

тестовую страницу: http://www.dinkypage.com/167605

Сообщил Bug: https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

Кто-нибудь знает решение/обходной путь для этой проблемы?

ОБНОВЛЕНИЕ: Я попросил Microsoft повторно открыть мою сообщенную ошибку, поскольку это нарушение стандарта w3c. Ответ:

«Проблема, о которой вы сообщаете, по дизайну. Internet Explorer использует только первый набор тэгов TD для установки ширины столбца».

стандарту W3C (http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout) говорит:

В алгоритме макета фиксированной таблицы, ширина каждого столбца определяется следующим образом:

элемент столбца со значением другого чем 'auto' для свойства 'width' задает ширину для этого столбца.

В противном случае ячейка в первой строке со значением, отличным от 'auto' для свойства width, определяет ширину для этого столбца. Если ячейка охватывает более одного столбца, ширина делится по столбцам.

Любые оставшиеся столбцы одинаково разделяют оставшееся горизонтальное табличное пространство (минус границы или интервал между ячейками).

Это означает, что эта функция нарушается дизайн в IE 10. Я рекомендую использовать другой браузер или остаться с IE 9 ...

источник

2013-03-07 Michael Wyraz

Такая же проблема существует в IE 10 на Windows 8 –

Проблема также в том, что все s имеют определенную ширину ... –

Просто присвойте стилям 'td' в первом 'tr' вместо' col's. – Teemu

Мой текущий обходной путь заключается в следующем стиле:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    table colgroup { display: table-row; } 
    table colgroup col { display: table-cell; } 
}

Это делает браузер обработкой colgroup/col как tr/td и похож на предложение Teemu (но без уродливых html-хаков). Селектор мультимедиа делает css видимым только для IE10 +

источник

2013-03-12 08:07:52

Я столкнулся с этим, в IE9 на самом деле.Единственное решение, которое я нашел, действительно, положить в скрытом манекен первой строки в таблице:

<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>

Тогда, чтобы избавиться от полученного разрыва, я применяю отрицательную маржу верхом на весь стол. Не изящно, но, похоже, это делается.

источник

2013-03-27 09:26:50 MisterNeutron

Интересно об этом, так как у нас никогда не было таких проблем в IE9 раньше - пример, который я написал, работает в IE9 (и во всех других браузерах, кроме IE10). –

Трудно разобраться, потому что ваш HTML имеет кучу других связанных с ним ошибок. Подайте код через валидатор, и вы поймете, что я имею в виду. – MisterNeutron

я обычно делают, как этот

<colgroup width="100%"> // for table a whole 
    <col width="50%"> // for each column 
    <col width="50%"> 
</colgroup>

50% в течение 2 колонки, 33% для 3 и т.д.

Это работало на IE10.

источник

2015-04-29 08:07:16

IE10 table-layout: исправлено нарушение, если используется colspan

ответ

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