Question

当我尝试将背景颜色设置为某种东西时，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

Answer 1

这个backgronud是用CSS制作的，它可能只是不同渲染引擎处理它的方式不同（一个用于firefox，一个用于chrome）。如果你希望它在每个浏览器中都是完美的像素，使用图像。我认为浏览器之间的微小变化值得在CSS中进行。

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

1 个答案: