浏览器之间的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;
}