Что не так с этим форматом таблицы в IE? - PullRequest
Новая
       4

Что не так с этим форматом таблицы в IE?

1 голос
/ 29 июня 2010

Это происходит только в IE, когда я помещаю таблицу с пометкой - средняя таблица - в этот HTML, выравнивание родительской таблицы нарушается и width = "250" на первом TD игнорируется, кажется,(Поле выбора должно начинаться с 250 пикселей слева от страницы, но это не так. Удалите таблицу с пометкой - средняя таблица - и выравнивание будет работать так, как должно. Почему это происходит? 

<!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" lang="en" xml:lang="en">
<head>
<title>asdf</title>
</head>
<body>
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1">
 <tr style="height: 50px;">
  <td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td>
  <td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf:  </span><select class="form_select_"><option value="asdf">asdf</option></select></td>
 </tr>
 <tr id="row_container" align="left" valign="top">
  <td colspan="2">
<!-- middle table -->
   <table cellpadding="0" cellspacing="0" border="0">
    <tr>
     <td style="width: 250px;" align="left" valign="top" id="nav_container"></td>
     <td style="width: 25px;" align="left" valign="top"></td>
     <td id="dat_container" style="width:1000px;" align="left"></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr style="height: 50px;">
  <td></td>
  <td></td>
 </tr>
</table>
</body>
</html>

Ответы [ 4 ]

3 голосов
/ 29 июня 2010

Согласно W3C Validator , ваш XHTML содержит шесть ошибок. В частности, атрибут width="250", который игнорируется, недопустим. Основная проблема с недействительными тегами заключается в том, что вы больше не получаете согласованный кросс-браузерный рендеринг, поскольку браузеры вынуждены использовать обходные пути. Попробуй исправить это первым. Как правило, макеты должны выполняться с помощью CSS.

3 голосов
/ 29 июня 2010

Вы используете чрезвычайно архаичный подход к макету сайта. Использование таблиц для размещения чего-либо на веб-сайте, который не является табличным по своей природе, - это MASSIVE no-no . Вы должны использовать совместимые со стандартами CSS и HTML (DIV, Spans и т. Д.), Чтобы выложить свой сайт. Таблицы обрабатываются по-разному в каждом браузере, и с ними может быть чрезвычайно сложно получить согласованный, функциональный, простой в обслуживании макет.

Мне неприятно это говорить, но я действительно не могу заставить себя помочь вам решить вашу текущую проблему с помощью таблиц. Мой единственный ответ - перезапустить, использовать теги DIV и CSS и наслаждаться блаженством, которое соответствует стандартам. (НЕ используйте атрибут style = "" для установки всех ваших CSS, используйте правильную таблицу стилей.)

2 голосов
/ 29 июня 2010

1000 + 250 + 25> 1250

ваш средний стол слишком широкий

1 голос
/ 29 июня 2010

Когда все сказано и сделано, короткий ответ ... потому что IE может быть очень отсталым. Тем не менее, вот работа вокруг:

Во-первых, вы выпустили упрощенное это: 

<!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" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

Обратите внимание, что для вашего второго тд в 1-м ряду не указана ширина. Если вы знаете, какой должна быть ширина, вы можете обойти эту проблему следующим образом: 

<!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" lang="en" xml:lang="en"> 
<head></head> 
<body> 
<table width="1000" border="1"> 
 <tr> 
  <td width="250" style="background-color:blue;">a1</td> 
  <td width="750" style="background-color:green;" >a</td> 
 </tr> 
 <tr> 
  <td colspan="2" style="background-color:red;"> 
       <table> 
        <tr> 
         <td width="1000">c2</td> 
        </tr> 
       </table> 
  </td> 
 </tr> 

</table> 
</body> 
</html>

Я согласен с тем, что говорили другие, что css - это путь, но это был не ваш вопрос. Надеюсь, это поможет.

...