应该是一个简单的 IE7 css 修复，但我想不通答案

【问题标题】：Should be a simple IE7 css fix, but I can't figure it out应该是一个简单的 IE7 css 修复，但我想不通
【发布时间】：2011-06-20 05:42:34
【问题描述】：

检查http://campbellcustomcoatings.com/ 在 IE7 以外的其他地方，然后在 IE7 中。您可以看到在 IE7 中，facebook like 按钮更多地位于右侧和上方。我想在 IE7 中将它向下推，就像在任何其他浏览器中一样。我已经尝试了一个多小时，但我无法让它让步。

【问题讨论】：

我将 IE8 放入兼容性视图（IE7 的某种模拟），因为我没有 IE7，并且“Like”按钮消失了。我认为您可能遇到的问题不仅仅是 CSS。
再试一次。我只是在做一些改变，把一些事情搞砸了。它现在应该又可以工作了。

标签： html css internet-explorer-7 facebook-like

【解决方案1】：

我为 IE7 更改了以下内容，它似乎将按钮放置在与 Chrome 中的外观相似的位置。

#fblike {
    margin-left:57px;
    margin-top:10px;
}

我认为问题来自浮动的<li> 项目。如果您使用 Chrome DOM 浏览器突出显示元素（F12 然后选择 Elements 选项卡），您可以看到因为存在浮动，“nav”、“container”和“fblike” " <div>s 并不严格包含所有子元素。您可以在不使用浮动的情况下创建水平导航。一个列表分开有一个nice article on lists，这可能有助于解决跨浏览器渲染问题（我总是用浮点数解决这个问题！）

【讨论】：

【解决方案2】：

只需在 iframe 中添加一些左边距和上边距。要为 IE7 执行此操作，请执行以下操作：

*margin-top:20px; /*20 looked good for me */
*margin-left:20px;

请记住，这不会被验证为合法的 CSS（至少，我认为不会），但其他浏览器会忽略它并且它工作正常。

【讨论】：

我有一个 IE7 样式表，我已经尝试过了。什么都不做。
@Catfish 从我所见，你在父级 div 上尝试过......你在实际的 iframe 上试过了吗？
@Catfish 很有趣。当我从 IE 开发工具应用它时它正在工作。我很感兴趣。 继续摆弄
@Catfish 将一些特定于 IE 的填充应用于父 div 怎么样？（如果可行，我将编辑答案）

【解决方案3】：

我很清楚你在说什么，因为我也有同样的问题。该按钮在不同版本的 IE 中看起来与在其他浏览器中不同（大小和位置）。

但是，您不能修改或将 CSS 应用到 Facebook Like Box 插件，因为它的内容包含在来自 Facebook 服务器的 <iframe> 元素中。

您拥有的唯一样式选项是 Facebook 提供给您的。

https://developers.facebook.com/docs/reference/plugins/like-box/

Adding CSS to Facebook Like Box

【讨论】：

我想我只需要为 IFrame 周围的 div 设置样式，我认为它应该可以工作，但我无法确定。
@Catfish：是的，我在容器 div 中有我的，但它有背景颜色。所以我的容器总是出现在相同的位置，即使里面的按钮移动或改变。
你不能将样式应用到 iframe 上吗？
@Catfish：我相信<iframe> 样式仅限于FB 允许的大小等。容器是具有动态高度、填充、彩色背景和圆角的固定宽度。 <iframe> 在内部具有“固定”宽度和高度。