Question

这个让我很难过，因为我已经在这个网站上通过类似的问题主题搜索和搜索，但没有一个能帮我解决这个问题。

我有以下HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>Sprout</title>
    <link rel="stylesheet" type="text/css" href="./main.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body>
    <h1>Mysample</h1>
    <div class="hero">
        <h2>Sprout.</h2>
        <p>A book by J. Daniel Bedford</p>
        <a href="#">Read now.</a>
    </div>
    <p>&copy; Mystwood Publishers Limited</p>
</body>
</html>

和我的main.css文件中的以下CSS文件代码与我的HTML文件（C：\ HTML）在同一目录中

h1 {
    font-family: Palatino, 'Palatino Linotype', serif;
    color: blue;
    font-size: 90px;
}

h2 {
    font-size: 32px;
}

当我在IE中打开代码时文本格式正常工作，但在Chrome或Firefox中没有，我可能会错过这两个可能导致问题的浏览器吗？

Answer 1

演示文稿（css）在不同的Web浏览器中可能会有所不同，因为每个Web浏览器都有自己的默认设置和用户可配置设置。由于默认设置不同，您将始终看到浏览器之间的差异。例如。在下面的屏幕截图中使用您的示例代码，您可以看到在我的计算机上IE和其他浏览器显示的页面“或多或少”相同。

要使浏览器显示相同的网页“或多或少相同”，您需要使用相同的默认设置（字体，字体大小，颜色，背景颜色等）配置每个网页

要调试浏览器之间的渲染差异，您需要在每个浏览器中使用Dev工具的DOM Explorer选项卡（上面的屏幕截图）并比较应用的规则。

为了帮助您，我们真的需要从您的计算机上截屏，并排显示浏览器。正如您在计算机上的屏幕截图所示，不同的浏览器显示的页面“或多或少相同”。那是因为我已经为我的所有测试浏览器配置了相同的用户设置，用于演示/可访问性（文本大小，缩放，颜色，背景颜色，字体系列，链接和悬停颜色等）。

在浏览器之间进行测试的最佳方法是使用https://www.browserstack.com/，因为您使用的是具有“工厂”默认设置的供应商浏览器的虚拟实例。比较您自己计算机上的浏览器，您应该期望最好的结果是它们将显示“或多或少相同”的相同网页，但不完全相同。

要调试演示文稿，您需要使用浏览器开发工具的DOM Explorer选项卡。

<!DOCTYPE html>
<html>
<head>
    <title>Sprout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1 {
            font-family: Palatino, 'Palatino Linotype', serif;
            color: blue;
            font-size: 90px;
}

h2 {
    font-size: 32px;
}
    </style>
</head>
<body>
    <h1>Mysample</h1>
    <div class="hero">
        <h2>Sprout.</h2>
        <p>A book by J. Daniel Bedford</p>
        <a href="#">Read now.</a>
    </div>
    <p>&copy; Mystwood Publishers Limited</p>
</body>
</html>

Answer 2

这也困扰了我很长一段时间 - 在Edge \ IE11中页面看起来没问题，但Chrome或Firefox没有。最终发现HTML或CSS语法没有任何问题。修复很简单。 HTML文件以UTF-16编码。我覆盖了文件，将其保存为UTF-8。它现在可以在所有四种浏览器中正常工作。

CSS格式在IE中显示，但不在Chrome或Firefox中显示

2 个答案: