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验证存在一些错误报告，但我不认为这是一个问题。

如果你想检查问题，这里有一个到我网站的链接。

我建议禁用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: IE9和blow往往有最多的问题，但有快速修复，可以帮助解决IE的问题，我建议这个在这里http://code.google.com/p/ie7-js/和使用IE9的一个。

编辑请阅读重要

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