Windows 7 呈现网页的方式与 XP 或 Vista 不同答案

【问题标题】：Windows 7 rendering web pages differently than XP or VistaWindows 7 呈现网页的方式与 XP 或 Vista 不同
【发布时间】：2009-11-19 16:19:06
【问题描述】：

自从切换到 Windows 7 后，我们注意到我们的几个网页略有不同。它主要在查看表单元素（文本输入和提交按钮）时显示。它们稍微大/小几个像素。这似乎与浏览器无关 - 我们在 Windows 7 中使用 IE8、FF3.5 和 Chrome 时会遇到相同的渲染问题。在 Windows Vista 环境中切换到相同的浏览器时，问题就会消失。

发生了什么事？为什么操作系统会影响 HTML/CSS 元素？我在这里遗漏了一些非常明显的东西还是发生了什么奇怪的事情？

这是一个具体的例子：

HTML：

<input id="input-search" type="text" name="thesearch" value="" />
<button id="btn-search" type="submit" name="search">Search</button>

CSS：

#input-search {
    float:left;
    font-size:18px;
    color:#5b5b5b;
    margin:2px 4px 0 0;
    width:200px;
}
#btn-search {
        background:url(/images/btn_search.png) no-repeat top left transparent;
        padding:5px 0px 6px 20px;
}

【问题讨论】：

我想知道显示器配置文件的 dpi 设置是否不正确。这个问题在许多不同规格的 Win 7 系统中是否一致？
你能把你看到的截图贴出来吗？

标签： html css windows-7 cross-browser

【解决方案1】：

默认按钮受 Windows 主题影响。例如，即使在 Windows XP 中，如果您在“经典”Windows 和“银色”主题之间切换，您也会注意到您的按钮发生了变化。您可以通过使用 CSS 设置按钮样式来解决此问题。

【讨论】：

改变宽度就这么简单吗？还是您必须参与边框和填充？
根据我的经验，为按钮设置背景图像的宽度/高度可以在浏览器和操作系统之间提供一致的结果。但是，如果没有一些测试，我不能说某些浏览器的框模型问题是否会影响默认按钮样式。坦率地说，当您在编辑的示例中设置背景图像时，您会看到不同之处，我有点惊讶。

【解决方案2】：

输入元素由浏览器本地呈现，并符合操作系统的标准设置。所以只要你在谈论普通的按钮、选择和复选框，我认为这是正常的。 UI 发生了变化，因此呈现控件的样式指南也发生了变化。

您可以自己设置这些元素的样式，但有限制。无论如何，您应该能够为所有控件的文本标签定义一个固定大小。但是，如果您定义相对大小，它们可能会由于不同的操作系统文本大小设置而呈现不同。我注意到 Windows 7 在这方面要灵活得多。

【讨论】：

【解决方案3】：

您是否定义了输入元素的大小？如果不是，则无法保证它们是如何呈现的，这完全取决于浏览器或系统。

【讨论】：

【解决方案4】：

如果您谈论的是在 Windows 7 中实际创建不同项目的方式，您可能需要考虑到系统可能对项目使用不同的默认系统字体。 Windows 7 上的 IE8 与 Vista 或 XP 上的不完全相同，因此它可能会渲染这些项目，只是有点不同。

【讨论】：

【解决方案5】：

不应该，你是在兼容模式下运行的吗？

【讨论】：

和我想的完全一样，但是，不——在默认模式下运行 Windows 7 和浏览器。
我认为应该。浏览器使用操作系统控件作为默认按钮。
Nosredna：不，浏览器自己渲染所有控件（不包括旧版 IE 和<select>）。它们只是碰巧看起来近似于原生（如果 FF 具有 Windows 经典外观，这是一个非常粗略的近似）。