Почему IE игнорирует ширину ячейки, когда задействован collspan? - PullRequest
Новая
       11

Почему IE игнорирует ширину ячейки, когда задействован collspan?

1 голос
/ 20 апреля 2009

Рассмотрим этот (отрезанный) пример 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">>
<body>
    <table style="background-color: Navy; width:400px">
        <tr>
            <td style="background-color: Green; width:35px">test</td>
            <td style="background-color: Green; width:35px">test</td>
            <td style="background-color: Green; width:35px">t</td>
            <td style="background-color: Green">buffer</td>
        </tr>
        <tr>
            <td colspan="4">
                <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" />
            </td>
        </tr>
    </table>
</body>
</html>

Это нормально работает во всех браузерах, кроме IE. Если изображение достаточно маленькое (скажем, 40), все хорошо. Когда размер изображения немного больше (скажем, 200), IE начинает увеличивать ширину ячейки.
Что происходит?

- Sidenote -
Людям, предлагающим использовать CSS. Я знаю. Это абстрактный пример. Таблицы по-прежнему являются действительным HTML и не должны бояться. Табличные данные должны быть в таблицах. Переизобретать таблицы с помощью divs по меньшей мере так же богохульно, как и создавать макет на основе таблицы.

Ответы [ 5 ]

2 голосов
/ 20 апреля 2009

Если вы жестко задаете ширину 4-го столбца, он работает как положено ... 

...
<td style="background-color: Green; width:295px">buffer</td>
...

Он игнорирует атрибут colspan, поэтому, если ширина изображения больше, чем в первом столбце, он смешивает все. Искать " IE6 colspan bug " ...

[EDIT:] Если вам нужно сделать это с таблицами, это (не красиво) может сработать: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">>
<body>
    <table style="background-color: Navy; width:400px">
        <tr>
          <td>
            <table width="100%">
              <tr>
                <td style="background-color: Green; width:35px">test</td>
                <td style="background-color: Green; width:35px">test</td>
                <td style="background-color: Green; width:35px">t</td>
                <td style="background-color: Green">buffer</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" />
          </td>
        </tr>
    </table>
</body>
</html>

напоминает мне немного о этом

Но я действительно думаю, что вы должны использовать CSS для разметки !!!

2 голосов
/ 20 апреля 2009

Попробуйте это: 

<style type="text/css">table {table-layout: fixed;}</style>

Это должно работать, это происходит только в IE6, я думаю (не с IE7 и IE8)

или вы можете использовать width: auto в 4-м столбце 

<td style="background-color: Green; width: auto;">buffer</td>

Кстати, я надеюсь, что вы не использовали приведенный выше код для создания табличного макета (что было старомодно, эй, вы должны изучить CSS-макет в этот день)

0 голосов
/ 20 апреля 2009

Существует основанная на CSS сеточная система под названием 960 , которая проста в освоении и будет работать для IE, FF и Sarari. Это поможет обеспечить соблюдение указанных вами диапазонов столбцов и создаст более четкую разметку. Вот хороший учебник .

Сначала я был настроен скептически, так как я старый парень из ASP.NET, но это сэкономило мне кучу времени на обслуживание и проблемы с несколькими браузерами. Я также обнаружил, что используя меньше таблиц, я мог бы быстрее задействовать больше функциональных возможностей на стороне клиента. Это определенный плюс.

0 голосов
/ 20 апреля 2009

Попробуйте установить свойство CSS overflow для нескольких вещей, например, для таблицы

Например: <table style="background-color: Navy; width:400px;**overflow: hidden**">

0 голосов
/ 20 апреля 2009

какой DOCTYPE, если есть, вы указываете над своим <html> тегом

Это работает, если вы измените его на 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

OR 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...