CSS为FF和IE8渲染不同

时间:2009-11-09 21:18:36

标签: php html css cross-browser

下面我添加了一些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;
  }

1 个答案:

答案 0 :(得分:1)

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

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