CSS 布局在 Firefox 中搞砸了，但在 IE 或 Opera 中没有？答案

【问题标题】：CSS layout messed up in firefox but not IE or Opera?CSS 布局在 Firefox 中搞砸了，但在 IE 或 Opera 中没有？
【发布时间】：2010-07-11 04:26:46
【问题描述】：

由于某种原因，Firefox 弄乱了以下网站布局，但它在 IE 和 Opera 中运行良好...

http://87.194.141.33/bivakas/shop

我曾尝试使用 firebug 来查找丢失的 div 或类似的东西，但遗憾的是没有成功。如果有人愿意花几分钟时间看看为什么会发生这种情况，我将不胜感激。

谢谢！！

【问题讨论】：

"在这里工作正常" -- fsvo 很好。确保运行所有基本的 HTML 和 CSS 验证器。
不，它在 FF（3.6.6，Windows）中显示有间隙和明显的视觉错误。它还有许多 HTML 和 CSS 验证错误。
我现在用
重新编码了它，它适用于所有浏览器。我现在唯一的问题是
的边界并没有沿着所有的 div 向下（即它不包含整个站点？！干杯家伙

标签： html css xml layout

【解决方案1】：

从markup 和CSS 的基本自动化质量检查开始...

……不，从头开始。以not abusing tables for layout开头。

Opera 提供a good introduction to web development using modern techniques。

【讨论】：

虽然我很欣赏使用表格是老派......但这对我当前的问题没有帮助。
是的，确实如此。如果您停止向浏览器扔垃圾，那么它们将能够更好地应对它。
+1“一般”。虽然，如果浏览器没有正确显示表格/css-table，这仍然是一个问题（即使设计/工具的选择是有问题的）。

【解决方案2】：

整个布局在一个 8 x 9 的表格中，莫名其妙地包裹在 2 个 div 中（ID 为“header”和“bvhead”，不少于）。

看来问题是由于在使用colspan 和rowspan 时出现数学错误，导致行与行之间的列数与行数不匹配.但是，在尝试修复它几分钟后，我放弃了它。

建议：

该站点存在大量错误——不同的浏览器以不同的方式清除这些错误。 Validate the HTML 并修复错误。同样validate and fix the CSS。

如果您必须使用表格，请不要将整个网站包装在一个怪物中！通过为每个部分使用一个新表，最大限度地减少副作用和交互问题。
丢失误导性和无关的 div。
所以而不是：

<body>
    <div id="header">
        <div id="bvhead">
            <table id="bvmaintable">
                ... Entire site here!!!
            </table>
        </div>
    </div>
</body>

使用类似的东西：

<body>
    <table id="bvHeader">
        ... 
    </table>
    <table id="bvAnnoyingAnimation">
        ... 
    </table>
    <table id="bvMenu">
        ... 
    </table>
    <table id="bvBody">
        ... 
    </table>
    <table id="bvFooter">
        ... 
    </table>
</body>

请注意，这允许从一个部分到下一个部分有不同数量的列，在语义上更有效，并且使将来清理表格布局更容易。

不要使用rowspans，而是考虑使用table-within-a-table-cell。尽管它很丑，但它对您的部分布局更有意义，并消除了一些行/列数学错误。

【讨论】：