google-chrome - 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 脚本的情况下进行检查，因为这反射(reflect)了已验证页面的状态。

这个问题的关键点是找出 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。

编辑请阅读!重要

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