IE/Firefox CSS 混淆：为什么我的表格在 Firefox 上有内边框，但在 IE 上没有？答案

【问题标题】：IE/Firefox CSS confusion: Why does my table have inside borders on Firefox, but not IE?IE/Firefox CSS 混淆：为什么我的表格在 Firefox 上有内边框，但在 IE 上没有？
【发布时间】：2017-05-15 16:31:39
【问题描述】：

我遇到了 CSS 在 IE 和 Firefox 之间无法正确显示的问题...最大的问题是我们有大量的 CSS 文件（这不是目前要修复的问题），并且我似乎找不到正在应用的样式。

无论如何，这就是我正在查看的内容：在我们网站的购物车页面上，我们有一个表格（是的，我知道），其中每一行都是购物车中的一个项目。在 IE、Chrome、Opera 和 Safari 上，这张表渲染得很好——一切看起来都很好，边框都被隐藏了，看起来很棒。然而，在 Firefox 上，虽然表格的外边框仍然隐藏，但分隔列/行的线条在表格内部会显示出来。

我没有直接链接来显示问题，但如果你去

https://store.petango.com/Roc-P6986.aspx

然后单击“添加到购物车”按钮，它会将您带到购物车页面（您可以在其中看到在 FFox 中显示的行，但在 IE 中不显示）。

对于它的价值，这是我们购买的第三方电子商务软件包，除此之外，我们将我们的网页设计租给了不同的第三方网页开发人员。因此，混乱的大量 CSS 文件/混乱。尝试查看特定 TD 元素的 CSS（在 Firebug 中）基本上不可能阅读它这么长，但我也看不到任何明显的东西。

如果这只是我错过的一些愚蠢的事情，我会激动，而且我们的 CSS 中存在一个众所周知的错误，它让它在除 Firefox 之外的所有浏览器中都能正常呈现 - 任何非常感谢您的帮助。

【问题讨论】：

不看你的代码，你在表格/单元格上有边距吗？还是单元格间距？
恐怕这里众所周知的错误是使用了一组如此复杂的 CSS 规则，以至于您无法使用 Firebug 对其进行调试...
谢谢 Shog - 但我认为我很清楚我对项目的复杂性感到厌恶。 :P Christopher - 每个单元格内都有 div，并且 div 有边距，但单元格上没有边距。

标签： css internet-explorer firefox border css-tables

【解决方案1】：

在 Firebug 中的一些探索表明，从 ctl00_wpm_Basket_ctl04_BasketGrid 表中删除 border-collapse:collapse 样式会删除边框。我什至不打算解释这一点 - 样式应该是完全没有必要的，就像许多其他适用的样式一样，它在多个级别上设置和重置多次......我怀疑你遇到了一些细微的差异样式应用于 Gecko 和其他浏览器；这可能是一个错误，但如果您决定报告它，我会鼓励您精简测试用例...

这不是目前要修复的问题

它可能应该是...否则，您最好熟悉使用 Firebug。

【讨论】：

实际上，在 Firebug 中进一步挖掘（试图找到与 Christopher Altman 上面的评论相关的一些边距或单元格间距）我也注意到了边框折叠设置，并回忆起在其他网络搜索（在放弃并在此处发布之前）。现在，关键是找出哪个 CSS 文件以及继承自哪个条目。谢谢！
@Ryan：它是在表格本身上定义的——作为内联样式！由于我不知道您的 HTML 是如何生成的，我不能说它是硬编码到标记中还是由某种服务器端处理生成的，但它绝对不是来自静态 CSS 文件。
哦，难怪我找不到它......它是一个 ASP gridview 控件，显然（去微软！）有一个错误，即由 ASP gridviews 生成的表格总是输出这种样式。谢谢，我现在就去找 that 的解决方法。叹息。
解决方法当然是将“Gridlines”属性设置为“None”。

【解决方案2】：

“我们完全认识到 IE 在 CSS 支持方面处于今天的领先地位。”

ieblog

【讨论】：

我不确定这与我的问题有什么关系？
那篇文章已有 5 年历史，加上问题说“......让它在除 Firefox 之外的所有浏览器中都能正常呈现。”我认为这不是 IE6 的问题。 ;)
完全不相关，甚至没有答案；我应该投反对票。但是 IE 抨击 +1。 :)