输入字段在不同浏览器中的呈现方式非常不同-解网

问：

好的，所以我正在设计一个网站，该网站在网页的右上角有一个登录表单。我设置了其输入字段的 size 属性，并得到了一些有趣的结果。下面是我拼凑起来的一组截图。我什至把它们堆起来给你们所有人。我什至为你们所有人扔了一个 jsFiddle。所以有四件事：

我根据堆叠图像中密码输入字段的右下角对齐它们。不要问为什么。
我设计所有东西的边框，直到布局正确，然后我删除它们并添加颜色和图像等等。
IE 9 屏幕截图基于 Adobe 的 BrowserLab，因为我在 Mac 上工作。
请注意，基于 WebKit 的浏览器（Safari 和 Chrome）呈现相同的大小。

经过一系列搜索，我找不到任何东西来揭示正在发生的事情。也许是因为很难将这样的问题写成简单的搜索词（或者至少对我来说）......

综上所述，我的问题是为什么输入字段的呈现方式如此不同，最重要的是，我该如何解决这个问题（最好没有 JavaScript 或对用户代理的依赖）？

Screenshots

HTML CSS XHTML 跨浏览器文本字段

这怎么可能重要？没有人同时在所有这些浏览器上浏览您的网站。考虑每个渲染是否可用。你已经浪费了太多时间去追求像素的完美，而这一切都没有合理的目的。请注意，按钮在 Mac 和 PC 上看起来不同。默认样式往往与操作系统的本机控件匹配。我认为这是一件好事;你有什么目的可以覆盖它？当用户在浏览器中增加字体大小时，您的完美设计会发生什么变化？

1赞 Tyler Crompton 3/19/2011

@Cody，你可以在脑海中留下这样的评论。我不是要实现像素完美。那太愚蠢了。我意识到几乎没有人在众多浏览器上浏览我的网站。但是，我不喜欢FF或Opera的渲染。它们太大了。当浏览器之间存在如此大的差异时，这是一件大事。如果我有一些东西被更大的效果图掩盖了怎么办？只有在你要有建设性的时候才发表评论。

0赞 Cody Gray - on strike 3/19/2011

我认为这是非常有建设性的。我的观点是，你是在浪费时间追逐白日梦。没有办法获得完美的像素。当用户在浏览器中增加字体大小时，您的整个网站将“太大”。然后呢？

0赞 Tyler Crompton 3/19/2011

@Cody，“没有办法获得完美的像素。我可以参考你我刚刚说完的话吗？“我不是想实现像素的完美。”至于字体大小的增加，我的想法是，如果他们想改变字体大小，就让他们。它唯一的布局差异是这些输入字段的大小和页面的长度（显然除了字体的大小）。

0赞 Tyler Crompton 3/19/2011

@Cody，请原谅我注意到 66 像素的差异。我认为这是值得关注的事情。10 像素，甚至 20 像素都可以，但 66 像素呢？

答：

3赞 Nick Bastin 3/19/2011 #1

该属性设置字段将显示的字符数（在和字段的情况下）。不同的浏览器使用不同的默认字体、字体大小和 ppi 度量值，这意味着您获得的大小（以像素为单位）字段的大小差异很大。sizetextpassword

此外，正如规范所说，这只是控件的“初始”宽度，如果浏览器决定在重排整个页面的过程中需要调整控件的大小，则可以自由地调整控件的大小。

为了使这个字段在不同的浏览器上接近相同（像素）大小，你必须用CSS来设置它的样式。话虽如此，可能有充分的理由认为它们中的每一个都是不同的大小 - 主要与默认字体有关 - 如果你对字段的大小进行像素限制，这意味着某些浏览器将比其他浏览器显示更多的实际文本。

输入字段在不同浏览器中的呈现方式非常不同

Input fields rendered very differently in different browsers

评论

评论