Google chrome 和 fire fox 之间的网站外观不同?

My website look is different between Google chrome and fire fox?

我的网站在 firefox 中像素完美,但它在 google chrome 中没有显示其真实外观,但我为我的网站使用了 bootstrap-4 和响应式断点。但为什么它们不能正常工作?

这在您设计网站时很常见。如果您对外观没问题,您可以保持原样,或者一些开发人员会做的是使用 jquery 检查浏览器或检查 server-side。你可以做一个简单的调用,然后在你的 body 上设置 class 并相应地设置样式。祝你好运!这是 link 到 jQuery 浏览器检测:https://api.jquery.com/jquery.browser/

这是正常现象,某些属性不受支持或从 chrome 到 firefox 呈现相同。最引人注目的属性是位置。我建议你研究一下 modernizr plugin,处理不同的浏览器非常好 CSS

这个问题被反复询问(使用不同的浏览器和渲染引擎组合)。但并没有真正的答案。相反,请记住以下几点,以使您的作品在大多数流行的浏览器和设备上看起来更相似。

一个

没有像素完美这样的东西。 句号。即使你设法找到了一个截图放在源 material(Photoshop、Sketch 等)顶部的完美点,你也可以转到另一台计算机(相同的浏览器和源 material) 而不是让它排队。但即使这样也不太可能,因为按照定义,像 Photoshop 文件这样的东西不能响应。


两个

您可以公平竞争,让大多数浏览器以相似的方式对待您的代码。为此,您需要了解每个浏览器都有不同的默认设置,然后删除这些默认设置,这样您的 CSS 代表最终解决方案。有两种典型的方法可以做到这一点:

  1. CSS 重置 - 这些会删除所有样式并强制您构建所有内容。

  2. CSS Normalize - 它试图使基本样式在所有浏览器中都相同。 (我在我做的每个项目中都使用规范化)


三个

了解 CSS box-model。这与浏览器如何处理构成呈现的 HTML 页面的 margin/padding/content 的 "boxes" 有关。浏览器使用的盒子模型会影响大小和间距。 Normalize 通常会解决这个问题,但许多浏览器默认使用不同的框模型。

还值得关注屏幕像素密度(这会影响任何具有固定尺寸的东西)并转换为基于百分比的尺寸调整(remvh/vw%),以便所有设备开始呈现尽可能接近您想要的内容。


了解每个浏览器的功能并规划 fallbacksshims 到 restore/add 在这些情况下的功能。首先,检查您尝试使用什么 caniuse.com 这将告诉您是否需要使用回退、检测缺失的功能或只是接受它不会像您希望的那样在任何地方工作的事实。