跨平台CSS

Question

我想知道CSS行为是否随着不同的操作系统而改变。对于vista而言，我的css工作方式有所不同，并且对于相同版本的浏览器，我的xp proffesional也是如此。我在vista + ie8和xp + ie8上测试我的应用程序。它的工作有点不同。

Answer 1

正式地说，在其他操作系统上使用相同的浏览器时，CSS行为不应该更改（例如Windows，MacO或Linux上的FireFox 3）。宽度和浮点数的计算由浏览器计算，而不是由OS计算。但是，有一些因素会导致网站在另一个操作系统中看起来有点不同。

使用其他操作系统（甚至是其他计算机）时遇到的一个问题是字体支持。如果您使用的某些字体仅在Windows平台上可用（或通常仅在安装某个应用程序时可用），则浏览器将使用其他字体，这可能会导致一些渲染差异。我甚至可以想象，与Windows中相同的字体相比，Linux中的字体大小也有可能不同。

您将遇到的另一个问题是表单元素（如文本框和下拉列表）。这些对于每个OS是不同的，尤其是下拉框在各种操作系统中可能表现不同（下拉部分的大小可能不同，文本框有时具有“3d”边界，有时仅有一条线）。当你将XP从XP风格（蓝色/绿色/灰色）切换到经典风格（旧学校灰色版本）时，你甚至会注意到这些差异。下拉字段将是一种不同的风格（如果你将它们与其他风格对齐）你会看到尺寸变化的元素）。但大多数情况下，这些差异只有几个像素，并且大多数用户没有注意到，但对于设计人员/开发人员来说，这可能有点烦人。

Answer 2

你看到了什么变化？由于操作系统主题可能存在细微差别 - 按钮，下拉列表，滚动条等元素的样式/大小可能不同。

即使您在XP中更改主题（经典与XP外观），您也可以发现一些差异。

Answer 3

有些事情可能会跨平台发生变化：

<强>字体
Windows“核心字体”应该是跨平台的，并不是大多数默认的Linux安装。另外，我的Ubuntu上的Firefox中的10pt并不像其他浏览器那样在13px上显示字体，它稍大一些。我认为有些字体也可能有不同的行高。

表单小部件
浏览器和平台的按钮，文本框，文本区，字段集和下拉列表各不相同。例如，Opera使用自己的Vista-esque皮肤形状控件，每个皮肤都不同。 Chrome似乎也使用自己的东西。

屏幕分辨率
如果设计像维基百科一样流畅，你最终会得到很长的文字，可能很难阅读。

<强>硬件
用户的硬件也可能导致颜色变化或其他图形异常。

Answer 4

CSS与平台无关。但是，它取决于浏览器。不同的浏览器可以不同地实现CSS，但具有相同浏览器的不同平台不会显示任何变化如果你可以在这里发布你的CSS会更好，这样我们就可以调试了。当然，由于主题，元素可能存在细微差别。

Answer 5

有很多事情可能因系统而异。即使在具有相同操作系统和相同浏览器的两个系统之间也可能存在差异。

CSS本身就是一个独立的标准，并没有改变。但是，所有浏览器都不会解释css相同，并且CSS标准并未涵盖页面应如何呈现的每个方面。另外，CSS介绍了如何解释正确的代码，但是如果你的代码中有一些不正确的东西，那么每个浏览器都可以尝试最好地解释它。

特别是文本渲染可能会有很大不同，因为有很多因素可以控制它。安装的字体，选择的平滑算法和用户大小设置等决定了文本的绘制方式。有相同字体的不同版本，因此例如XP和Vista上的Arial不必呈现完全相同，因为字距调整规则和字体平滑提示等细节可以重新设计。

某些页面元素（如按钮，表单域和滑块）可以从操作系统和系统中的用户设置继承其外观和大小，因此它们可能看起来不同。

Answer 6

是。它可能会改变。

可以在操作系统的不同视觉样式[主题]中不同地呈现元素样式。

例如：

在某些主题中，fieldset会有圆角，而在其他主题中则不会被舍入。

Answer 7

我在不同操作系统中遇到的问题是： 1.具有固定宽度的文本在vista中以两行显示，而在xp上它是在同一行中。 我面临的一个主要问题是我的设计的某些部分在VISTA + IE8中变得扭曲，这在XP + IE8中呈现得很好。为了使我的应用程序与我使用的IE8兼容  标签。