代码之家 › 专栏 › 技术社区 › QAZ

HTML表格列高度;适用于Firefox而不是IE

internet-explorer-7 firefox html

QAZ · 技术社区 · 16 年前

我有一些在FireFox3/Opera/Safari上显示很好的HTML,但不使用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文档类型添加到代码截图中。添加了一个屏幕截图。

感谢您的帮助,谢谢:)

4 回复 | 直到 6 年前

Eli 16 年前

如果你这样试试怎么办:

<!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>

postback 16 年前

正确的答案是:不要用表格布局页面。

技术上的答案是:您的表单元格正在做它们应该做的事情,也就是说,您不能用所使用的代码结构来解决您的问题。

黑客的答案是:如果左右两侧的单元格正好是37px高,那么就必须在左右两侧的单元格中添加另外两个嵌套表。

Andrew Bullock 16 年前

我不太清楚为什么会这样。你想要实现什么样的布局,它真的需要成为一个表吗?您不应该用表来布局页面,它们应该只用于真正的表格数据。

你考虑过使用潜水器吗?

Steve Perks 16 年前

把它扔过 validator 我相信你会靠近一点。

事实上,你看到的是IE的正常行为:在主表中添加border=“1”,它将向你展示正在发生的事情。

推荐文章

ajai.s · 根据用户偏好改变网络a帧中的化身

2 年前

Samy Mostakim · chrome正常工作,但firefox给我这个erorr

3 年前

NobleUplift · 如何修复waitforkeyements的黑客版本中的无限循环?

6 年前

palak · 组织。openqa。硒。firefox。NotConnectedException:在使用GeckoDriver和Firefox执行代码时,无法连接到主机127.0.0.1

6 年前

Nick Evans · 硒。常见的例外情况。WebDriverException:消息:尝试通过Raspberry-pi3中的GeckoDriver打开Firefox浏览器时,连接被拒绝

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

Mathador · WebDriverException:消息:TypeError:rect未定义

6 年前

PlanetAtkinson · 如何通过Python selenium在多个firefox二进制文件中选择要使用的firefox可执行文件

6 年前

Murasaki Aikon · 为什么firefox中未定义事件?

6 年前

patrick · 删除svg上的“全选”蓝色水滴单击

6 年前