IE8 删除 CSS 属性答案

【问题标题】：IE8 deletes CSS propertiesIE8 删除 CSS 属性
【发布时间】：2009-10-06 17:04:19
【问题描述】：

我终于完成了一个 Web 应用程序，现在我必须让它与 Internet Explorer（至少 8 个）兼容。现在几乎完成了，除了一个地方，IE8 显然删除了我定义的一些 CSS 格式。

我上传了一些generating Perl Code 的截图，Firefox (+ Firebug) 是如何渲染它的，IE8 (+ "Web Developer Tools") 是如何渲染它的。

IE8 似乎忽略了我创建的每个元素的宽度、高度、左侧和顶部。谷歌似乎对这种行为一无所知。谁能帮我解决这个问题？

选修课

如果您想知道它应该做什么：应用程序的这一部分会在情节提要（有点像在线漫画创作者）上创建一个叠加层，并用用户创建的所有面板填满屏幕。它缩小/扩大预览，以便在不拉伸图像的情况下尽可能多地使用整个屏幕，并将它们排列在网格中（1x1、1x2、2x2、2x3 等）。然后可以通过单击屏幕标题来重命名屏幕，可以通过拖动它们来对其进行排序，并且可以通过单击悬停时出现在右上角的删除按钮来删除它们（就像 iPhone 上的徽章一样）。这就像一个魅力，我花了一些时间让 CSS 正常工作。

编辑 1

代码需要重构（这是我要做的最后一件事），因此代码中有一些可疑的 CSS。别介意:)

编辑 2

我可能已经找到了通过my Public Folder 与您分享我的代码的方法。只需下载storyboard.zip 并打开storyboard.html。

编辑 3

在doctype 的家伙们的帮助下，我能够找到并discover 的错误。现在这很麻烦，因为我需要 window.innerHeight 和 window.innerWidth 的值来调整预览，使其尽可能地填满屏幕。你们知道替代方案吗？

【问题讨论】：

你想在 doctype.com 上问这个问题。它可能更适合这个（不是这里不合适，但可能有更多的人可以提供帮助）。
您应该检查 IE 是否没有从缓存中加载 CSS，这种情况经常发生。
添加了用于查看和编辑的 HTML 代码。

标签： html css internet-explorer web-applications

【解决方案1】：

如果没有更多代码/演示，真的无法判断 — 看起来你有很多 CSS 正在进行，我们只能在屏幕上看到一些片段。然而，

IE8 似乎忽略了我创建的每个元素的宽度、高度、左侧和顶部。

通常是由于缺少宽度和高度的“px”单位造成的，但任何 CSS 解析错误都可能导致它。我们看不到生成的 HTML 源代码，但是源代码中的反斜杠是什么？它们是否被您正在使用的任何语言字符串格式化的东西所取代？尝试将style 属性的内容复制/粘贴到CSS validator 中以检查是否存在明显错误。

黑色覆盖层的透明度也存在问题。从 DOM 来看，IE 无法解析“过滤器”属性，你是如何设置的？由于您似乎在使用 jQuery，您应该可以使用 element.css('opacity', .5) 从脚本中设置它。（编辑：我猜你实际上正在这样做，从 'zoom: 1' IE 看到的判断。但是很明显，过滤器属性被破坏了；如果 jQuery 不能parseInt 值，它会这样做。什么您是否将值传递给.css()？）

我也不确定是什么：

style="width:auto;height:auto;position:static;

用于，无论如何，这些都是默认值。此外，max-width 和 width 一样，不适用于内联元素。

Bonus nitpicks：$screen_name（以及您模板化为 HTML 的任何文本字符串）需要进行 HTML 转义，否则您可能存在跨站点脚本漏洞。并且纯数字 ID 是无效的。

【讨论】：

$screen_name\px;
另外：默认值被重新定义，因为 CSS 存在一些问题，因为 jQuery，Firefox 没有应用默认值。

【解决方案2】：

问题已在doctype 得到解答。
问题是 IE 与世界其他地方不兼容。

我使用 window.innerHeight 和 window.innerWidth 来确定我的预览可以有多大。不幸的是，IE 不支持这个函数，所以它返回一个 NaN 而不是一个 Number，而后者又被 Perl 处理为 NaN。 IE 最终收到的 CSS 类似于

width: NaNpx;

我将 window.innerWidth 更改为 document.body.offsetWidth（与 Height 相同），现在它可以工作了，虽然不是那么漂亮。

【讨论】：