Question

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

问题是“动画”导航栏中的错误绘制的<a>元素（使用：悬停）。

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

但它应该看起来像this。

然而，有趣的是，在Chrome“开发人员工具”窗口中，如果我轻推（例如取消选中并检查） 任何元素的任何属性，浏览器更新到正确的样式。如果我放大和缩小页面，也会修复它。

我能找到的唯一类似问题是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;

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