我的网站在 Firefox 中是像素完美的，但在 google chrome 中没有显示其真实外观，但我为我的网站使用 bootstrap-4 和响应式断点。但是为什么它们不能正常工作呢？
【问题讨论】：
12px）在 Chrome 中的显示方式不同，因为抗锯齿不同。如果您有其他问题，请具体说明不同之处。
标签： html css responsive-design bootstrap-4 responsive
这被反复询问（使用不同的浏览器和渲染引擎组合）。但没有真正的答案。相反，为了让您的作品在大多数流行的浏览器和设备上看起来更加相似，请注意以下几点。
一个
没有完美的像素。句号。即使您设法在源材料（Photoshop、Sketch 等）顶部放置的屏幕截图非常完美，您也可以转到另一台计算机（相同的浏览器和源材料）而不用排队向上。但即使这样也不太可能，因为按照定义，像 Photoshop 文件这样的文件无法响应。
两个
您可以公平竞争，让大多数浏览器以类似方式对待您的代码。为此，您需要了解每个浏览器都有不同的默认值，然后删除这些默认值，以便您的 CSS 代表最终解决方案。有两种典型的方法可以做到这一点：
CSS 重置 - 这些会删除所有样式并强制您构建所有内容。
CSS Normalize - 尝试使所有浏览器的基本样式相同。 （我在我做的每个项目中都使用规范化）
三个
了解 CSS box-model。这与浏览器如何处理构成呈现的 HTML 页面的margin/padding/content 的“框”有关。浏览器使用的盒子模型会影响大小和间距。 Normalize 通常会解决这个问题，但许多浏览器默认使用不同的盒子模型。
还值得关注屏幕像素密度（这会影响任何具有固定尺寸的东西）并转换为基于百分比的尺寸（rem、vh/vw、%），以便所有设备都开始渲染尽可能接近的东西尽可能达到你想要的。
四个
了解每个浏览器的功能并计划fallbacks 或shims 在这些情况下恢复/添加功能。首先，检查您尝试使用 caniuse.com 的内容，这将告诉您是否需要使用回退，检测缺失的功能，或者只是接受它不会像您希望的那样在任何地方都能正常工作的事实。
【讨论】：
这在您设计网站时很常见。如果你对外观没问题，你可以保持它的样子，或者一些开发人员会做的是使用 jquery 检查浏览器或检查服务器端。你可以打一个简单的电话，也许可以相应地为你的身体和风格设置课程。祝你好运！以下是 jQuery 浏览器检测的链接：https://api.jquery.com/jquery.browser/
【讨论】：
user-agent 在操作系统或设备上的渲染也会不同。因此，试图捕捉所有这些差异几乎是不可能的。但更大的问题是user-agent 经常被漏报或欺骗。一个很好的例子是标准模式与普通模式下的 IE。特征检测告诉您浏览器的“行为”而不是它所说的。
这是正常的，某些属性不受支持或从 chrome 到 firefox 呈现相同。最显着的属性是位置。我建议你看看modernizr plugin，处理不同的浏览器CSS很好
【讨论】：