html - CSS Webkit 错误 - 重绘问题？

Question

我创建了一个网站，该网站在 FF 和 IE 中完全正常工作，但在基于 webkit 的浏览器(即 Chrome)中存在错误。

问题是画错了<a> “动画”导航栏中的元素(使用 :hover)。

当页面在 Chrome 中完成加载时，它看起来像 this .

但它应该看起来像this .

然而，有趣的是，在 Chrome 的“开发者工具”窗口中，如果我微调(例如取消选中和选中)any 元素的 any 属性，浏览器更新到正确的样式。如果我放大和缩小页面，它也是固定的。

我能找到的唯一类似问题是 this one .我试图将解决方案应用到我的问题中，但它没有用。重要的是要注意，我没有使用任何 javascript 在页面加载时动态更改样式(如上面的问题)，它只是标准的 HTML 和 CSS。

我认为这是 webkit/chrome 中的重绘错误。有什么办法可以解决这个问题吗？

Answer 1

不确定这在技术上是否是一个错误，但它绝对是一种奇怪的行为。您可以通过更改此部分来解决此问题:

#header_lower  ul li a{
box-sizing: border-box;
-ms-box-sizing: border-box; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

...使用内容框而不是边框​​框。除非您的布局严重依赖于这些元素周围的粗边框并且您无法对其进行补偿，否则这可能是可行的方法。