显示时Chrome不是像素完美：块[关闭]答案

【问题标题】：Chrome not being pixel perfect when a is display: block [closed]显示时Chrome不是像素完美：块[关闭]
【发布时间】：2016-11-23 20:13:00
【问题描述】：

正如您在 [this][1] fiddle 中看到的，悬停时a 的悬停状态总是比 ul 高一个像素。（您可以在小提琴中看到这一点：它甚至超过了ul 的边界）这只发生在 Chrome 中（也在 FF en IE10 中测试过，但他们没有这个问题）。有什么解决办法吗？

注意：overflow: hidden 不是解决方案，因为我希望溢出对其他内容（子菜单等）可见。

ul {
  list-style: none;
  text-align: center;
  background: whiteSmoke;
  border: 1px solid red;
}
li {
  display: inline-block;
  font-size: 150%;
  position: relative;
  margin: 0;
}
li a {
  color: #555;
  text-decoration: none;
  text-shadow: 0 2px 0 white;
  display: block;
  padding: 0.2em 0.5em 0.3em;
}
li a:hover {
  color: black;
  background: whiteSmoke;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.125);
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">About</a></li>
    <li class="has-sub-menu"><a href="#">Contact</a></li>
  </ul>
</nav>

【问题讨论】：

那么为什么不能从演示中去掉所有多余的 HTML 和 CSS？完成此操作后，您将获得一个简洁的代码示例，您也可以将其发布到您的 OP 中，以便在小提琴死后问题仍然有用。
删除box-shadow后问题会消失吗？
@Sparky 不幸的是没有。
我在 Chrome 11 中没有看到您的问题。现在更新 Chrome。
仅 2011 年...哈哈。现在我更新到 24 版，仍然看不到这个问题。

标签： css google-chrome pixel-perfect

【解决方案1】：

如果您的菜单在 Chrome 中低 1 个像素；有两种特定于浏览器的方法只能在 Chrome 中应用校正样式。 See Similar Post Answered

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  position:relative;top:-1px;
}

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify menu styling 
}

【讨论】：

这也会影响不需要调整的浏览器。
因为这只是Chrome的问题，所以我会这样搞砸其他浏览器。
@BramVanroy：我想也许换一种方式会更好，但没关系...我还发布了一个指向 chrome 条件格式的指南的链接。
不要把它当成个人，但“修复 CSS”意味着编写在所有浏览器中都能正常工作的干净 CSS。你的建议只不过是一个草率的黑客......再次，只是陈述一个事实，而不是人身攻击。一旦 OP 清理了他的示例，其他人就可以提出更合适的答案。
Devin，他并没有专门询问如何制作浏览器条件 CSS（绝对是最后的手段）。他想知道为什么会发生这种情况以及如何修复他的 CSS。换句话说，我并不是建议 CSS 应该能够识别您的浏览器……我建议您编写适用于所有浏览器的 CSS。