表格错误在IE浏览器（7）

下面是一个简单的HTML与表格布局的代码。在FF中，它看起来应该是这样的，它在IE7中看起来不像。我究竟做错了什么？

我该如何解决它？表格错误在IE浏览器（7）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <TITLE>test</TITLE> 
    </head> 
    <body> 
     <table id="MainTable" cellspacing="0" cellpadding="0" border="1"> 
     <tbody> 
      <tr> 
       <td colspan="4"> 
        <div style='width:769; height:192;'>192 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" valign="top"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
       <td rowspan="2" valign="top"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
       <td rowspan="2" valign="top"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top" rowspan="2"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
       <td valign="top" rowspan="2"> 
        <div style='width:190; height:200;'>200 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td valign="top"> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td valign="top" > 
        <div style='width:190; height:100;'>100 
        </div> 
       </td>       
      </tr> 
      <tr> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td> 
        <div style='width:190; height:100;'>100 
        </div> 
       </td> 
       <td colspan="2"> 
        <div style='width:383; height:100;'>100 
        </div> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

来源

2008-10-13 Mafti

如果您使用严格的文档类型，它看起来有什么不同吗？ – Neall 2008-10-13 11:16:11

除了这些其他评论之外，创建一个最小测试用例（例如减少行数）会很好，a）您可以更准确地识别问题b）所以上面发布的示例代码的大小可以减小 – 2008-10-13 11:35:33

我假设你抱怨中间行的最小高度（只包含跨越行的单元的高度）和相邻行的放大高度进行补偿，在div之间留下间隙。

当行只包含行跨单元时，IE无法计算最佳行高。通常的解决方案，当你绝对不能调整它来摆脱行跨时，通常的解决方案是在表的一侧添加一个1px“虚拟”列，其中包含空单元格，每个单元格的“高度”设置为行应该有多高。

但是，根据你打算做什么，CSS布局可能更合适。如果它像这个例子那样是一个固定像素的东西，那么每个div的绝对定位将会非常容易。其他位：CSS宽度/高度值需要单位（可能是'px'）; VALIGN/CELLSPACING /等。即使您使用表格布局，也可以更容易地在样式表中完成;一个标准模式的DOCTYPE可能会阻止一些更糟糕的IE错误（尽管不是这个旧的，与非CSS相关的错误）。

来源

2008-10-13 11:42:16 bobince

完全一致，你可以看看蓝图CSS或者一些帮助

来源

2008-10-13 11:22:48 roundcrisis

一开始其他的CSS框架，你的CSS值应该有单位，例如width:190;应该是width: 190px;

来源

2008-10-13 11:23:23 Greg

是，这几乎肯定是问题的原因，但对问题更具体的描述将有助于我们确定这一点。 – 2008-10-13 11:27:51

乍一看，它看起来像IE7有一些支持这种格式。起初，我打算建议摆脱div，并直接在TD上移动格式（宽度和高度），但我尝试了这一点，似乎并没有解决问题。

我想这不是一个很好的解决方案，但它有可能用更多的单元格与他们之间的不可见边框替换rowspan单元格？但是，如果文本大于上部单元格的大小，则此解决方案会失败。

来源

2008-10-13 11:42:15 rslite

-3

你一定要用CSS。不应该将表格用于布局。

来源

2008-10-13 12:00:19 hmcclungiii

Doctype（4.01 Transitional没有系统标识符（url））的选择触发IE中的Quirks模式，这使得它与其他浏览器高度不一致。

切换到：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

或者至少是：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

（和，当然，validate但HTML和CSS（这会挑上你的长度值的缺失单位））。

来源

2008-10-13 12:31:48 Quentin

表格错误在IE浏览器（7）

回答

相关问题