Question

我的网站在firefox opera和chrome中正常工作（我没有IE所以我不确定 - 因为我使用的是fedora linux 18）。在最近更新chrome（最多一个月之后）后，页面无法正确呈现。有人知道改变了什么吗？我怀疑盒子模型被解释的方式发生了变化，因为我正在使用display：table-cell这样：

 <div id="midboxmidleft" style="display: table;">
    <div style="display: table-cell; vertical-align: middle; width: 100%;">
          <div id="sideleft">
          <ul>
          <li>blahblah</li>
          <li>blahblah</li>
          <li>blahblah</li>
          <li>blahblah</li>
          <li>bla blah</li>
          </ul>
          </div>
      </div>
 </div>

......右边相同（为了实现垂直居中）

我也是因为一些尴尬发生在鼠标上我想提一下我也在使用这个css：

li :hover{background-color:#fff;-moz-opacity:.500;filter:alpha(opacity=50);opacity:.50;}

标记已成功验证。对于CSS验证，存在一些错误reported，但我认为它们不是问题。

如果您想检查问题，请访问我的网站link。

我建议在禁用java脚本的情况下检查它，因为这反映了经过验证的页面的状态。

此问题的关键点在于弄清楚Chrome最近导致此问题的变化（因为我的代码已经过验证但我可能仍然错了）。如果您知道我在哪里可以找到有关使用的渲染引擎的更改日志，请告诉我。任何帮助表示赞赏！

Answer 1

我不知道你的确切问题是什么，但是我的猜测就像你的盒子模型已经改变了一样，你总是可以尝试使用box-sizing来推动你所有的边框和填充在盒子里面而不是将它们添加到框的外部，这将使浏览器之间的中断更加困难，您可以像这样应用此属性

<强> CSS

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

另外我建议使用CSS重置，它将重置所有默认边距和填充元素，如果你使用它（CSS重置），你将不得不添加自己的边距，但它将修复不同浏览器解释的问题默认边距也不同。任何方式希望这会有所帮助，这里是CSS重置的链接，只需将其添加到单独的样式表中，并在其他样式表之前链接到它。这是链接http://www.cssreset.com/scripts/eric-meyer-reset-css/

PS：IE 9和打击往往有最多的问题，但有快速修复，将帮助修复IE的问题，我会建议这一个http://code.google.com/p/ie7-js/并使用IE9。< / p>

编辑请仔细阅读！重要

查看您的代码并解决问题，您需要从height: 48%中第45行的.midimage课程中删除andreas.css行，以解决轻微问题，但是您我必须确定你的位置。

从旧版本渲染chrome 26.0.1410.43中的差异

1 个答案: