2

我的网站在 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 最近发生了什么变化（因为我的代码已经过验证，但我可能仍然是错误的）。如果您知道我在哪里可以找到有关所用渲染引擎的更改日志，请告诉我。任何帮助表示赞赏！

4

1 回答 1

2

我不知道您的确切问题是什么，但我的猜测与您的猜测一样，盒子模型发生了一些变化，您总是可以尝试使用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 之一。

编辑请阅读！重要

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

于 2013-04-01T04:01:01.147 回答