Высота столбцов HTML-таблицы; Работает в Firefox не в IE

StackOverflow https://stackoverflow.com/questions/250931

Вопрос

У меня есть HTML-код, который хорошо отображается в FireFox3 / Opera / Safari, но не в IE7. Фрагмент выглядит следующим образом: 

<!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">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%">

      <tr>

        <td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
        </td>

        <td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>

      </tr>

      <!-- This row doesnt fill the vertical space on IE7 //-->
      <tr>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
      </tr>

    </table>
    </body>

Вторая строка не будет заполнять вертикальное пространство, созданное средним столбцом первых строк (обратите внимание на rowspan = " 2 "), правильно. Вместо этого первые строки 1-го и 3-го столбцов расширяются вниз, хотя я установил их высоту 37. На рисунке ниже показано, что происходит в IE7 и Firefox3 ...

alt text

РЕДАКТИРОВАТЬ: добавлен тип документа HTML в фрагмент кода. Добавлен скриншот.

Любая помощь приветствуется, спасибо:)

Это было полезно?

Решение

Что если вы попробуете это так: 

<!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">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%" border='1'>

      <tr>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td>asdf</td></tr></table>
        </td>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

      </tr>



    </table>
    </body>

Другие советы

Правильный ответ будет таким: не размещайте страницу с помощью таблиц.

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

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

Я не совсем уверен, почему это происходит. Какой макет вы пытаетесь достичь, действительно ли это должен быть стол? Не следует размещать страницы с таблицами, их следует использовать только для настоящих табличных данных.

Рассматривали ли вы использовать div?

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

На самом деле - то, что вы видите, является нормальным поведением для IE: добавьте border = " 1 " на ваш основной стол, и он покажет вам, что происходит немного яснее.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top