css - 浏览器之间的 CSS 问题

Question

我正在做一个网站设计，但我遇到了无法在所有浏览器中正常工作的选项卡。该网站在这里： http: //www.designmeditations.com/stc4-1/

在当前版本的 Chrome 中，它看起来不错。在 FF 中，它低了一个像素。如果我将它向上移动一个像素，那么它在 FF 中看起来不错，并且当您悬停时，您会在 Chrome 中看到一条 1 像素的线。

建议？我通常使用无序列表元素上的图像进行这些转换，但我认为在这种特殊情况下我根本不需要使用图像。

谢谢。

Answer 1

我看不出您所说的区别，但是使用制表符的良好做法是以像素为单位说明行高。尝试line-height: 20px从那里添加和调整。它很可能会解决差异。

#mainnav a {
  background: transparent;
  padding: 6px;
  border: #0A4F91 solid 1px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: white;
  text-decoration: none;
  margin-right: 10px;
  line-height: 20px;
}