Question

下面我添加了一些HTML / CSS。 CSS在FF中看起来很好，但在IE8中它是错误的。在IE8中，“主页”按钮显示在“余额”和“转弯”值下方的行上。它应该出现在同一行。为了进行比较，您可以在两个浏览器(warning; potentially accesses FB profile)中查看该页面（此链接指向将要求您的个人资料的Facebook应用。您必须开始新游戏，选择难度级别，然后您将被带到游戏板。有问题的代码位于页面底部）。我希望有人可以告诉我如何修复IE8的CSS。感谢。

HTML CODE：

$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;
  }

Answer 1

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

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

CSS为FF和IE8渲染不同

1 个答案: