chrome 26.0.1410.43 与旧版本的渲染差异

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-script 的情况下检查它，因为这反映了已验证页面的状态。

这个问题的关键是找出导致这个问题的 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 和 Blow 的问题往往最多，但有一些快速修复可以帮助您解决 IE 的问题，我建议在这里http://code.google.com/p/ie7-js/ 使用这个并使用 IE9。

编辑请阅读！重要提示

查看了您的代码并解决了您的问题，您需要从andreas.css 中第 45 行的 .midimage 类中删除行 height: 48%，这将解决闪烁问题，但您必须解决您的问题位置。