1

这是一个非常简单的 HTML 文档：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.MyInputClass {position: absolute; left:32px; top:64px; width:119px; height:19px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none; font-size: 13px; text-align:left;}
.MySelectClass {position: absolute; left:159px; top:64px; width:121px; height:21px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none; font-size: 13px; }
</style>
</head>
<body>
<input class="MyInputClass" type="TEXT" id="MyEdit">
<select class="MySelectClass" id="MySelect" ></select>
</body>
</html>

这不是我使用的实际 HTML，但它用于演示目的。使用所有版本的 FireFox（从 13.0 到 24.0）这是我得到的（链接到 imgur.com 上的图像）：

http://imgur.com/GiaAycv

请注意，在 Windows 7 下，INPUT 和 SELECT 元素的视觉高度匹配，但在 Windows XP 下，INPUT 元素的高度比 SELECT 大 2 个像素。

使用 Firebug，我可以检测到 Firefox 在 Windows XP 下使用边框宽度 = 2px，而在 Windows 7 下仅使用 1px。我猜这来自内置样式表？

另请注意，使用 CSS 重置之类的东西，可以说：

<style type="text/css">
input {border-width: 1px;}
</style>

这不是一个可行的解决方案，因为每当我们显式设置边框宽度时，边框绘制都会发生变化，并且我们也会得到不一致的边框：

http://imgur.com/W5omNWj

请注意，input元素的底部和右侧边框几乎是不可见的。

所以，我的问题是：

  1. 有没有其他选择，或者我将不得不使用一些 CSS 重置脚本？
  2. 为什么 Firefox 会有这种不一致的行为？
  3. 如果 FF 对不同的操作系统有不同的风格，我如何确保我的网站或 Web 应用程序将在未来的 Windows、Mac 或 Linux 版本中正确呈现？（恕我直言，这似乎是不可能的。）

我还测试了 Chrome 和 Safari，他们没有显示这个问题。

4

2 回答 2

2

答案：

  1. 别无选择。
  2. 这并非不一致，每种浏览器样式构成的元素都会因操作系统而略有不同。唯一一致的是它们彼此不一致。
  3. 你不能，但这就是网络标准的用途。浏览器供应商尽最大努力实现 W3C 规范，因此只要您的代码正确符合规范，您就应该是安全的。

值得注意的是，表单元素是非常特定于操作系统的，更何况选择框（该死的东西绝对不可能[字面意思，它们不可能]在 Mac 上设置样式）。

如果您需要对表单元素进行如此多的控制以确保它们在各个方面、形状和（双关语）形式上都相同，那么您就不能使用表单元素，您必须构建/找到已构建的替代方案在 HTML/CSS/JS 中。

于 2013-10-10T18:41:41.743 回答
0

Firefox 使用任何操作系统默认主题作为表单控件。这将取决于操作系统、操作系统版本、用户选择的主题等等。

这回答了你的问题 2。对于问题 1，我建议不要担心......对于问题 3，你不能，除非你的布局对表单控件的不同外观是健壮的。

于 2013-10-10T18:36:33.193 回答