Question

我正在研究CSS3和HTML5并试图开发一个简单的主页。由于我家里只有Mac界面，所以我无法检查Windows上的任何差异。

但是有一天，我的一个熟人告诉我，浏览器之间存在像素差异，我完全不知道。然后我检查了我的页面，看起来是错的。

即使它与我设置的分辨率相同，Mac上的Chrome也向我显示了几个按钮的合适位置，但Windows上的Chrome却没有。

他们的立场完全不同，破坏了设计。我该如何解决这个问题？或者这是正常的吗？

感谢。

Answer 1

在操作系统和浏览器的每个组合上开发相同的站点并非易事。它试图解决问题，为我的开发时间增加了几个小时。

有几种工具可以帮助您完成此任务，例如Cross Browser Testing。或者您可以通过在计算机上安装浏览器来手动测试它。使用虚拟机在其他平台上测试您的网站也很常见。 VMware很受欢迎。

使用跨浏览器库也可以为此提供帮助。比如jQuery，这是非常受欢迎的。这个page列出了有关该主题的更多信息。

Answer 2

差异不在Chrome中，但区别在于Mac和Windows。在这里，您可以检测到userAgent并将相应的class添加到body标记（使用jQuery）：

jQuery(document).ready(function(){
 if(navigator.userAgent.indexOf('Mac') > 0){
  jQuery('body').addClass('mac-os');
 } else {
  jQuery("body").addClass("pc");
 }
});

检测到userAgent后，您可以专门为Mac和Window及其浏览器编写css。

Answer 3

2018年，Chrome和firefox的行为会有所不同，具体取决于操作系统。我最近建立了一个网站，在最新的chrome和firefox版本中，一个页面在windows中呈现正常，而在macOS和ubuntu上，它有一个小故障。应该是内联的元素在某些状态下水平显示。

Mac上的Chrome与Windows上的Chrome有何区别？

3 个答案: