Bootstrap 4 背景颜色在 Chrome 上看起来完全不同答案

【问题标题】：Bootstrap 4 background color looks completely different on ChromeBootstrap 4 背景颜色在 Chrome 上看起来完全不同
【发布时间】：2018-04-14 11:53:01
【问题描述】：

当我尝试将背景颜色设置为某种东西时，它在 Firefox 中看起来完全没问题。但在 Chrome 上，它正在做一些奇怪的事情。

我将正文背景颜色设置为蓝色，它看起来就像我在使用 Firefox 时所期望的那样。但是 Chrome 似乎使主体颜色变为浅蓝色而不是蓝色，并且在我创建的示例 jumbotron 周围有一个紫色框。起初我以为容器有某种奇怪的背景属性使它看起来像这样，但在将容器的背景颜色设置为红色后，我发现紫色框甚至不是容器。我不太确定那个紫色盒子是什么。这是怎么回事？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device-width, initial-scale = 1" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <title>Bootstrap</title>
</head>
<body style="background-color: #0000FF">

        <div class="container" style="background-color: red;">
            <div class="jumbotron"><h1>Jumbotron</h1></div>
        </div>

    </body>
</html>

第一张图片是 Chrome，第二张是 Firefox

【问题讨论】：

标签： html css twitter-bootstrap background-color bootstrap-4

【解决方案1】：

这个背景是用 CSS 制作的，它可能只是不同渲染引擎处理它的方式不同（一个用于 firefox，一个用于 chrome）。如果您希望它在每个浏览器中都达到完美像素，请使用图像。我认为在 CSS 中实现浏览器之间的细微差异是值得的。

【讨论】：

嗯，有趣的解决方案。这是常见的做法吗？
是的，这很常见，但不是好的做法。我们不能为不同的渲染引擎处理程序做任何事情。