1

我在重新设计的网站上遇到了一些 CSS 和/或表格问题。由于众所周知的“100% div 高度”问题，我使用表格作为网站的结构元素。所以它看起来像这样：

HTML 标记：

<div id="header">...</div>
  <table>
  <tr>
    <td><div id="main">...</div></td>
    <td class="crighttd"><div id="cright">...</div></td>
   </tr>
</table>
<div id="footer">...</div>

和相应的 CSS

table {
  border-top: 1px solid #6A6A6A;
  padding: 0;
  margin-top: 20px;
  border-spacing: 0
}

td {
  vertical-align: top;
  padding:0;
  margin:0
}

.crighttd {
  background: #4F4F4F;
  vertical-align:top;
  margin: 0
}

#cright {
  width: 185px;
  float: right;
  background: #4F4F4F;
  height: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 25px 0 25px 20px;
}

这里的问题是，显然右侧的 td 在某些浏览器中根本不会显示（在 Mac 以及旧的 IE 实例上都看到过）。这是 CSS 问题还是表格的问题？

4

3 回答 3

7

由于众所周知的“100% div 高度”问题……</p>

那会是哪一个？在这里解决的？基本上，重要的部分是

html, body {
    height: 100%;
}

作为一种解决方法的表格在这里是不行的，因为据我所知，它们在高度方面有类似的问题。

于 2008-11-10T23:08:44.163 回答
1

我敢肯定，仅通过 CSS 定位和布局就可以完全实现您想要实现的目标，而无需借助表格进行布局。

听起来好像这些表格无论如何都不起作用，所以选择纯 CSS 布局，不仅您可能会找到解决方案，而且您还将拥有一个更符合标准、符合标准的网站，这将更容易实现在未来保持和改变。

据我所知，您的目标是一个相当简单的固定宽度、居中、两列布局。在 Google 上快速搜索“2 列 css 布局”将为您提供大量示例和教程，说明您可以用来实现此目的的方法。

于 2008-11-11T09:06:04.737 回答
0

对于故障排除，我通常给我的 div 和其他元素一个边框，以便我可以直观地看到它们在页面上的位置。

border: 1px solid red;

我怀疑不是您的 td 没有显示，而是您在其中的 div 。您可以尝试在 css 中设置它的显示属性。

position: relative;

您还可以尝试从 #cright 样式中删除 float 属性。

这些不一定能解决您的问题，而只是有关如何排除故障的建议。如果不查看页面的完整布局，很难实际解决问题。

于 2008-11-10T23:08:36.737 回答