与 Chrome、Opera 和 Safari 相比，为什么 IE 和 FF 上的 div 宽度呈现如此不同？答案

【问题标题】：Why is div width rendered so differently on IE & FF in contrast to Chrome, Opera, & Safari?与 Chrome、Opera 和 Safari 相比，为什么 IE 和 FF 上的 div 宽度呈现如此不同？
【发布时间】：2011-10-28 22:13:51
【问题描述】：

在saveadullam.org/pages/media.html 上，正文部分正确地覆盖了 Chrome、Safari 和 Opera 中的整个宽度。但在 IE7 和 FF3 中，它只覆盖了 2/3 的宽度。见图像。双语文本在一个表格中，我知道这是禁忌，但这里的问题是在一个包含整个表格的 div 中，而不是在基于表格的布局中

我知道 IE 有它的渲染问题，但这里 IE 和 FF 的行为方式相同。（样式表是here。）

有什么问题？

（编辑：适用于 FF，但不适用于 IE。）

【问题讨论】：

标签： html css internet-explorer firefox google-chrome

【解决方案1】：

只需从 css 中删除 .mainBody 中的 width:70% 即可。它适用于FF。

.mainBody {
    vertical-align: top;
}

【讨论】：

对-o，这在 FF 上成功了——但在 IE 上没有。我实际上创建了一个没有 width:70% 的不同类 mainBodyMedia ，因为 mainBody 类在其他地方需要 width:70% 。关于为什么它在 WebKit 中以全角呈现的任何想法？无论如何，这个问题在 FF 中得到了解决——但你能弄清楚为什么它仍然存在于 IE7 中吗？
是的，问题是您在一行中有一个单元格，并且该单元格设置为width: 70%。似乎不同的 UA 对此的处理方式不同。当然，CSS 规范实际上并没有定义这里的行为......请注意，.mainBodyMedia 上仍然有 70% 样式。
谢谢你，鲍里斯。这很有帮助。
@Boris 奇怪的是，该修复解决了 FF 中的问题，尽管正如您所说的那样，这个新类 .mainBodyMeda 仍然有 70% 的宽度。但是删除之后，问题就解决了。