FF 和 IE8 的 CSS 呈现方式不同答案

【问题标题】：CSS Rendered Differently for FF and IE8FF 和 IE8 的 CSS 呈现方式不同
【发布时间】：2009-11-10 07:55:14
【问题描述】：

下面我包含了一些 HTML/CSS。 CSS 在 FF 中看起来不错，但在 IE8 中是错误的。在 IE8 中，Home 按钮出现在 Balance 和 Turn 值下方的行上。它应该出现在同一行。为了比较，您可以在两个浏览器中查看页面(warning; potentially accesses FB profile)（此链接指向一个 Facebook 应用程序，它将请求您的个人资料。您必须开始一个新游戏，选择一个难度级别，然后您将被带到游戏中板。有问题的代码在页面底部）。我希望有人能告诉我如何修复 IE8 的 CSS。谢谢。

HTML 代码：

$html .= '<div id="info-panel">'."\n";
$html .= '  <div id="total-funds">Balance: &euro;<span id="total-amount">'.$gamePlayerData['funds'].'</span>M</div>'."\n";
$html .= '  <div id="turn">Turn: '.$newTurn.'</div>'."\n";
$html .= '  <div id="home"><a href="'  . $config->url->absolute->fb->canvas . '/"><img src="' . $config->url->absolute->public . '/images/home_24x24.png" id="img-home" alt="Home" /></a></div>'."\n";
$html .= '</div>'."\n";

CSS 代码：

  #info-panel {
    width: 742px;
    border: 3px solid gray;
    background-color: #ddd;
    color: red;
    padding: 6px;
  }

  #total-funds {
    display: inline;
    font-size: 16px;
    padding-right: 10px;
  }

  #turn {
    display: inline;
    font-size: 16px;
    padding-right: 10px;
  }

  div#home {
    display: inline;
    float: right;
  }

  #img-home {
    margin-top: -3px;
  }

【问题讨论】：

不，我不会让你访问我的 Facebook 个人资料。如果您想提供一个实时测试用例（这是一个好主意），那么让我们提供一个没有附加条件的测试用例。
接近潜在有害的选项在哪里？
我很好奇为什么你使用<div> 标签，然后将它们设置为display:inline，而不是使用跨度或只是自然地设置链接元素的样式。不看这个例子，感觉里面有很多多余的 HTML，没有帮助。我的钱在div#home 中的float: right 上，但如果没有将我的Facebook 个人资料交给你，我无法确定。你用Firebug之类的东西吗？它很方便，因为您可以打开和关闭 CSS 规则并实时查看效果。
我从未要求访问您的 Facebook 个人资料。你指的是什么？
您的应用程序链接，facebook 要求您的应用程序获得访问用户个人资料的权限。有很多不同的方法可以让事物出现在正确的位置，根据我的经验，浮动通常会引起最头疼的问题，特别是当你将浮动的东西与非浮动的东西混合时。 IE 也是这样做的罪魁祸首。

标签： php html css cross-browser

【解决方案1】：

我找到了解决办法。我将 div#home 规则更改为：

  div#home {
    position: absolute;
    right: 6px;
    bottom: 4px;
  }

【讨论】：