0

我无法让我的一些按钮或输入在浏览器中看起来相同。文本的垂直定位通常是问题所在。我尝试了多种浏览器，Firefox (16) 只是忽略了我在 OSX 中的 line-height 并且在 Windows 中看起来仍然不同。

通常有 1px 的差异，有时甚至更多。当您切换到 iPad 或其他移动设备时，这尤其是一个问题，它总是以某种方式看起来不同。这是我的CSS...

  margin         : 0px;
  padding        : 0px;
  font-size      : 15px;
  //height       : 15px; // Tried this too with unsatisfying results
  line-height    : 1;
  vertical-align : top;

我在没有使用高度属性的情况下截取了屏幕截图 浏览器 chrome、safari、ie10、firefox 中的行高问题。 在 OSX 和 Windows 8 中

编辑：
所以我四处寻找更多信息，发现了一些类似问题的问题。
但是没有人解决它...-
> Firefox 和 Chrome 之间的行高差 1 像素
-> Firefox 与 webkit 的行高低 2px

编辑2 ：
此外，如果我制作了一个jsfiddle，我仍然会遇到问题，它有点不同，因为它与我正在处理的网站的上下文不同，但它仍然是行高/文本问题：
请参见此处：http： //jsfiddle.net/XQ7VD/3/ 这是 OSX 上的 Chrome（左）和 Firefox（右）

edit3：
这是一个将行高设置为 18px 的屏幕截图（来自这个 jfiddle：http: //jsfiddle.net/BJ8eR） 在此处输入图像描述

我刚刚看到 jsfiddle 按钮和悬停框有同样的问题！xD
好的，我现在已经完成了屏幕截图...

--
如果有人知道技巧，请与我们联系。谢谢！

4

1 回答 1

0

不同平台上的所有浏览器中的文本渲染都是不同的——字体抗锯齿是完全不同的。所以很难得到像素完美的结果。根据我的经验，为大量浏览器设置输入/按钮元素的样式是主要的 PITA。尤其是移动 Webkit 在某些情况下是不可预测的。

如果您的 CSS 不是摘录，您可能需要添加display:inline-block;.

于 2012-10-12T13:28:08.083 回答