Question

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

HTML MARKUP：

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

与CORESPONDING 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问题还是表格中的东西？

Answer 1

因为众所周知的“100％div高度” - 因为...

那会是哪一个？那个解决了here？基本上，重要的部分是

html, body {
    height: 100%;
}

作为解决方法的表格在这里是禁止的，因为据我所知，它们在高度方面存在类似的问题。

Answer 2

我确信你想要实现的目标完全可以通过CSS定位和布局来实现，而无需借助表格进行布局。

听起来这些表格无论如何都不起作用，所以选择一个纯CSS布局，你不仅可以找到一个解决方案，而且还有一个更符合标准的网站，为此感到自豪将来更容易维护和改变。

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

Answer 3

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

border: 1px solid red;

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

position: relative;

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

这些不一定能解决您的问题，而只是提供有关如何解决问题的建议。如果没有看到页面的完整布局，很难实际解决问题。

mac上的CSS / Tables问题

3 个答案: