为什么 Firefox 以不同方式显示我的页面？答案

【问题标题】：Why is Firefox displaying my page differently?为什么 Firefox 以不同方式显示我的页面？
【发布时间】：2010-01-25 09:09:04
【问题描述】：

所以问题是：我有三列布局页面。在右侧有一个广告，我希望能够在某些页面上关闭它，以便内容扩展并且页面有两列而不是三列。

我找到了使用display: table-cell 的解决方案。这适用于最大的浏览器，但一个奇怪的问题只发生在 Firefox 中。当我转到我的页面时，广告会下降到内容下方，并且内容会扩展。然后当我点击刷新时，广告会弹出，一切似乎都很好。

你能帮忙吗？

这是css：

#wrapper{width: 960px; margin: 0 auto;}

#left{float: left; width: 220px; margin: 6px 0 0 5px;}

#content_wrapper{float: left; width: 724px; margin: 6px 0 0 5px;}
    #content{min-height: 400px; min-width: 522px; max-width: 724px; border: solid 1px #ccc; padding: 12px; vertical-align:top; display: table-cell; }
    #right{width: 168px; padding: 0 6px 0 5px; display: table-cell;}

【问题讨论】：

你的问题很奇怪。你怎么能说“这适用于最大的浏览器”，然后说“一个奇怪的问题只发生在 Firefox 中”——因为 Firefox 是当今排名第二的浏览器，它适用于哪些“最大的浏览器”？
那是因为 Firefox 实际上正确地呈现页面，不像 IE... ;)

标签： css firefox layout

【解决方案1】：

Internet Explorer does not support table-cell 属性，所以如果您使用 Internet Explorer 并尝试在 Firefox 上查看，它们会有所不同。可能 firefox 可以正常工作，但 IE 不行。

没有 Internet Explorer 版本（包括IE8）支持属性值“继承”，“内联表”， "run-in", "table", "table-caption", "table-cell", "表列", “表列组”、“表行”或 “表行组”。

【讨论】：

您好，感谢您的快速回复！当我输入display: table-cell 时，它会修复 IE 的布局。我发现 IE 不支持该属性，但问题是 IE 在其中放置了一些东西，而不是修复布局的 table-cell 属性。也许如果我发现该属性是什么，我可以将其放入我的代码中。但我真的一直在努力。
IE 不支持但放一些东西意味着，即使你尝试放display: unknown-cell 它也会起到同样的作用？我认为你应该尝试以不同的方式修复。
好的。所以插入display: unknown-cell 对两种浏览器都做了同样的事情。布局在 IE 中看起来不错，但商业 div 在 Firefox 中上下跳跃。所以显然我必须找到其他解决方案......如果你想知道该网站是klifur.is
您要设计的元素是什么？当你给它们提供垃圾时，元素会被设置为它们的默认值。例如，<div> 是一个块元素，所以如果你使用div {display:utter-rubbish}，那么 div 将默认为display:block。我们需要知道元素是什么才能知道值是什么。
问题解决了！摆脱了display: table-cell 并改为使用display: inline-block。我还必须对模板索引文件进行一些小改动。