Question

这是一个非常简单的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下使用的是border-width = 2px，在Windows 7下只使用了1px。我猜这是来自内置样式表吗？

另请注意，使用类似CSS重置的内容，请说：

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

不是一个可行的解决方案，因为每当我们明确设置边框宽度时，边框图会发生变化，我们也会得到一个不一致的边框：

http://imgur.com/W5omNWj

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

所以，我的问题是：

有没有替代方案，或者我有义务使用一些CSS重置脚本？
为什么Firefox会出现这种不一致的行为？
如果FF针对不同的操作系统有不同的样式，我如何确定我的网站或Web应用程序将在未来的Windows，Mac或Linux版本中正确呈现？（这似乎很不可能恕我直言。）

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

Answer 1

数目：

别无选择。
这并不矛盾，每个浏览器样式根据操作系统的不同略有不同。唯一一致的是它们彼此不一致。
你不能，但这就是网络标准的用途。浏览器供应商尽最大努力实现W3C规范，这样只要您的代码正确符合规范，您就应该是安全的。

值得注意的是，表单元素是非常特定于操作系统的，甚至更多选择框（这些该死的东西绝对不可能[字面上，它们是不可能的]在Mac上进行样式化。）

如果你需要对表单元素进行如此多的控制，以确保它们在各种方式，形状和（双关语）形式中看起来相同，那么你就不能使用表单元素，你必须构建/寻找替代方案它是用HTML / CSS / JS构建的。

Answer 2

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

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

Firefox根据操作系统使用不同的内置样式表？

2 个答案: