CSS Webkit Bug - 重绘问题？

Question

4

我已经创建了一个网站，在FF和IE中完全工作正常，但在基于Webkit的浏览器（即Chrome）中存在一个错误。

问题出现在“动画”导航栏（使用:hover）中错误绘制的元素上。

但它应该看起来像this。

然而有趣的是，在Chrome的“开发者工具”窗口中，如果我调整任何元素的任何属性，浏览器会更新到正确的样式。如果我缩放页面，也会修复这个问题。

我找到的唯一类似的问题是this one。我尝试将解决方案应用于我的问题，但它没有起作用。需要注意的是，我没有使用任何javascript在页面加载时动态更改样式（如上面的问题），它只是标准的HTML和CSS。

我认为这是webkit / chrome中的重绘bug。有没有修复它的方法？

- Chris

1

你能给个示例代码吗？没有示例代码很难测试 :) - marcus erronius

这是 CSS 和这是 HTML。如果我没有按照 SO 的正确提交代码的方式，那么请原谅，pastebin 是我首先想到的东西。 - Chris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- marcus erronius · Accepted Answer

不确定它是否技术上算是一个漏洞，但它绝对是奇怪的行为。您可以通过更改此部分来解决它：

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

...使用 content-box 代替 border-box。除非您的布局严重依赖这些元素周围的粗边框并且无法进行补偿，否则可能是正确的选择。