Facebook应用程序中iframe中的填充错误

Posted 2023-03-06

【中文标题】Facebook应用程序中iframe中的填充错误

【英文标题】：Padding bug in iframe in Facebook app

【发布时间】：2011-08-04 08:11:07

【问题描述】：

来自潜伏者的第一篇文章，所以请多多包涵。

在我公司的 Facebook 应用程序中，有一个表单可能包含错误消息，这些消息会出现双左填充。它们有相当多的填充来与它们上面的输入对齐（这也得到了左边的填充）。

(Broken error message img) http://img687.imageshack.us/img687/2609/windows7x64ie9beta2.png

当我从 Facebook iframe 中弹出同一页面时，它正常显示，表单元素和错误消息排列整齐。

(Non-broken error message img) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png

实际的代码是一个继承的（在所有意义上的）混乱，但确实适用于包括 IE6 和 7 在内的所有东西，没有 hack。以下是这些 lis 上的所有非重置样式：

clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 160px;

我已经确认将填充加倍会导致视图混乱（我只能在非混乱视图中使用 IE 开发工具，因为它无法处理 iframe）。

有人知道吗？除了撕掉这个旧代码并重新开始？

更新：似乎撕掉旧代码可能是必要的。我有一些没有孩子的 UL，可能会导致一些破损。

UPDATE 2：动态生成的dom是一团糟，但是这里的工程师没有时间重构它，所以我可能永远也得不到这个问题的答案。 :(

【问题讨论】：

欢迎来到 SO！为什么不暂时在第三方服务器上发布图片和链接？

@BethBudwig - 我已经为您制作了内嵌图像。我建议您阅读the FAQ，这样您就知道声誉是如何运作的。 （没有魔法硬币。;D）

@Beth -- 我猜你缺少一个结束标签（例如</td>），并且 iframe 中的恢复处理方式不同，因为它没有周围的元素。

我很想看到为 iframe 生成的实际源代码，这样我们就可以验证发生了什么，但也许这只是我很傻......

@drachenstern - 我相信这会很快解开谜团。解决此类问题时，屏幕截图不太令人满意。

【参考方案1】：

这可能不是一个理想的解决方案，但我会使用一个条件和一个单独的 IE9 样式表来解决这个问题。

类似：

    <!--IF[IE 9]-->
      // Include IE9 stylesheet here
<![endif]-->

在那个样式表中可能会做这样的事情：

clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 80px; /* half the padding */

【讨论】：

这是我的后备计划——但对于我们的 4% 的用户来说，暂时不要维护另一个特定于 IE 的样式表，这可能是值得的。但这是一个不错的解决方案。 :)

你们在使用任何类型的重置吗？我知道您提到样式没有被重置，但它不可能重置样式表？

我们正在使用重置。我列出了非重置样式。

【参考方案2】：

你在用花车吗？我通过类似的问题提出了这个问题。

看看这个答案：IE 9 CSS Float problem!

【讨论】：

我没有使用花车 - 抱歉，我认为这无关！