Question

由于目前在我希望的特定液体布局中使DIV标签在浏览器平台上正常工作的限制，我选择使用表和DIV的组合进行布局。话虽如此，仍然存在一些问题。

第一个问题是在Firefox中，当我使用高度为100％的表格时，我的页脚行高度的呈现方式与在IE中呈现的不同。会发生什么是在Firefox中，表的页脚行的高度大于为表行指定的高度。反过来，这会抛弃我的页脚布局。

以下是该页面的代码：

<html>

<head>

<meta NAME="DESCRIPTION" CONTENT="Cold Fusion Applications and Development">

<meta NAME="keywords" CONTENT="cold fusion, coldfusion, sql server, graphic design, houston, texas, tx, web developer, web development, e-commerce, survey, surveys, web applications, php, mysql, access, foxpro, sql, perl, shopping cart, web programming, macromedia, webmaster, html, cfml, xml, 77057, cfware, cfware.com, www.cfware.com, hosting, dhtml, dynamic html, web programmer, graphic designer, website, resume">

<link href="style.css" rel="stylesheet" type="text/css">

</head>
<!-- BODY -->
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<!--TABLE I -->
<table class="fullheight" width="100%" height="100%" min-height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
   <tr><td height="116" align="center" valign="top">
       <!-- HEADER -->
       <div class="header">
       <div class="lfc">Cornerstone</div>
       <div class="rfl"><img src="c4sqlogo.gif" width="295" height="68"></div>
       <div class="lf4">Foursquare</div>   
       </div>
       <div class="spacer"></div>
       <!-- HEADER END -->
       </td>
   </tr>
   <tr><td align="center" valign="center" bgcolor="#FFFFFF">  
             <!-- CONTENT -->
             <div class="content">


<table class="fullheight" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td align="center" valign="middle">
<h1 class="font-black">Cornerstone Foursquare Church</h1>
<br>
<h2>7791 Hillbarn Dr. Houston, TX 77040</h2>
<br>
<h2>(713) 856 - 7773</h2>
<br>
<br>
<h3>Service Times:<br>Sunday Morning Worship 10:30AM<br>Sunday Evening Bible Study 6:00PM
<br>Wednesday Evening Bible Study and Prayer 7:00PM</h3>
</td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
</table>


             </div>
             <!-- CONTENT END -->
       </td>
   </tr>
   <tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
          <!-- FOOTER --> 
          <div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
          <div class="footer"><div class="footertext"><a href="http://www.c4sq.org"> w w w . c 4 s q . o r g </a></div></div>
          <!-- FOOTER END -->
       </td>
   </tr>
</table>
<!-- TABLE I END -->
</body>
</html>

这是sytle表的代码：

html, body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
        color: :#a02f1d;
        height: 100%;
        width: 100%;
}

a {
color: #ffffff;
text-decoration: none;
font-size: 12;
font-weight: 500;
}

.header {
color: #ff0000; 
margin: 0 auto;
width: 760px;
height: 116px;
background-image: url(stripe.gif);
background-repeat: repeat-x;
}

.fullheight {
height:100%;}

.lf4 {
float: left;
margin-top: 0px;
clear: left;
width: 240px;
margin-left: 190px;
color: #a02f1d;
font-size: 26px;
font-weight: semi-bold;
font-style: italic;
}

.lfc {
float: left;
margin-top: 8px;
margin-left: 20px;
color: #a02f1d;
font-size: 48px;
font-weight: semi-bold;
font-style: italic;
}

.rfl {
float: right;
margin-top: 24px;
margin-right: 20px;
clear: right;
}

.content {
margin: 0 auto;
width: 760px;
overflow: hidden;
color: :#a02f1d;
}

.spacer {
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 4px;
overflow: hidden;
}

.clearspacer {
background-color:#000000;
}

.footer {
color: #ffffff; 
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 30px;
clear: both;
}

.footertext {
color:#ffffff;
margin-top: 6px;
font-size: 12px;
}

SECOND问题与修改现有布局有关，因此存在宽度为760像素的居中垂直区域，其显示颜色与周围视口不同。主要的困难是，为了让我的页脚在两个浏览器中坚持到底部并使用视口调整大小，我不得不重新采用表格布局。然而，目前的策略是使用尽可能少的巢，以便从使用DIV的速度和清晰度中受益。我会选择使用DIV布局来排除TABLE布局，如果它不是因为显然，目前不可能的问题，即使用DIV液体布局来使用粘性页脚。

Answer 1

我知道这是非常不相关的，但我建议您暂时使用the w3c validator来验证您的HTML。

Answer 2

一些建议：

添加doctype - 如果使用正确的文件类型，您可以将IE设置为标准模式而不是quirks模式http://www.quirksmode.org/css/quirksmode.html，因此IE和其他浏览器之间的行为将更加一致。

根据K4emic的建议 - 验证您的标记。

将css重置添加到零默认边距和填充，这是一个很好的起点http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/。

你会发现这些东西会让布局错误变得更容易。否则，你只是不知道从哪里开始，是你的CSS，你的HTML，默认的浏览器样式，IE的渲染模式......？

Answer 3

正如其他响应者指出的那样，首先必须确保您的文档格式正确。也就是说，它必须符合DTD。我将指出一个容易发现的问题：

<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
      <!-- FOOTER --> 
      <div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
      <div class="footer"><div class="footertext"><a href="http://www.c4sq.org"> w w w . c 4 s q . o r g </a></div></div>
      <!-- FOOTER END -->
   </td>
</tr>
</table>

在此代码段中，您可以看到

<tfoot>

元素未公开。它应该包含

<tr>

但是缺少了。

这些小错误可能会导致您目睹的行为不一致。如果您仍然得到了行为，那么您可以查看浏览器差异。某些HTML编辑器（如Frontpage和Dreamweaver）可以设置为符合DTD的输出代码，并突出显示不符合的区域。我建议使用一个。

Firefox中的表行高度

3 个答案: