简体繁体 English

检查操作系统之间的CSS差异

[英]Check For CSS Differences Between OS's

原文 2013-07-02 14:44:17 2 2 html/ css

I have an app that runs across a few different computers and I develop on Ubuntu using Chrome. 我有一个可以在几台不同的计算机上运行的应用程序，我使用Chrome在Ubuntu上进行开发。

Normally my CSS layouts look ok on PC's running Windows, but I've been noticing that a few of my layouts will break when viewing on my co-worker's computers (instead of being side-to-side with floats, will break to a new line for example). 通常，我的CSS布局在运行Windows的PC上看起来还可以，但是我一直注意到，当在同事的计算机上查看时，我的一些布局会损坏（而不是与浮动控件并排放置，而是会换成新的例如）。

Generally removing a couple pixels on either side will take care of the inconsistencies. 通常，移除任一侧的几个像素将解决不一致问题。 This got me to thinking, is there any way to check the display differences on CSS between OS's? 这让我开始思考，有没有办法检查OS之间CSS上的显示差异？ Generally there are guidelines on cross-browser styling, but I don't seem to remember any places that show the differences between OS's. 通常，有关于跨浏览器样式的指南，但是我似乎不记得有任何地方可以显示出操作系统之间的差异。

2 个解决方案

Most likely, the problems you're seeing aren't related to the OS so much as which fonts are being used and precisely how they're rendered. 很可能，您所看到的问题与操作系统无关，而与所使用的字体以及确切的渲染方式无关。 Using default fonts, "ABC" might render 16px wide on Windows but only 15px wide on your flavor of Linux. 使用默认字体，“ ABC”在Windows上可能会渲染16px宽，但在Linux风格上只能渲染15px宽。

In general, it's a good idea to add in a little extra tolerance when sizing a box based on how long (in pixels) the text inside of it is. 通常，在根据框内文本的长度（以像素为单位）调整框大小时，增加一些额外的公差是个好主意。

You will have to test your css in different browsers. 您将不得不在不同的浏览器中测试CSS。 You must install as many browsers possible in your machine and check periodically. 您必须在计算机中安装尽可能多的浏览器并定期检查。

Also, there are tools that render your site in different browsers and you can see snapshots. 另外，还有一些工具可以在不同的浏览器中呈现您的网站，并且您可以看到快照。

like this one: http://browsershots.org/ 像这样的一个： http : //browsershots.org/

it has a big list of browsers/OS to check. 它有大量的浏览器/操作系统需要检查。