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

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在这方面更加灵活.