Question

自从切换到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;
}

Answer 1

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

Answer 2

输入元素由浏览器本机呈现，并遵循操作系统的标准设置。因此，只要您谈论普通按钮，选择和复选框，我认为这是正常的。 UI已更改，因此也更改了用于呈现控件的样式指南。

您可以自行设置这些元素的样式，但有限制。您应该能够以任何速率为所有控件的文本标签定义固定大小。但是，如果定义相对大小，则由于不同的OS文本大小设置，它们可能会以不同方式呈现我注意到Windows 7在这方面更加灵活。

Answer 3

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

Answer 4

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

Answer 5

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

Windows 7渲染网页的方式与XP或Vista不同

5 个答案: