这个问题难倒了我，因为我已经搜索并搜索了该网站上类似的问题主题线程，但没有一个能帮助我解决问题。
我有以下 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>© 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 中不能，我可能缺少这两种浏览器可能导致问题的什么？
最佳答案
Presentation (css) 在不同的网络浏览器中可能会有所不同，因为每个网络浏览器都有自己的默认设置和用户可配置的设置。由于默认设置的差异，您总是会看到浏览器之间的差异。例如。在下面使用您的示例代码的屏幕截图中，您可以看到在我的计算机上，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>© Mystwood Publishers Limited</p>
</body>
</html>
关于html - CSS 格式在 IE 中显示，但在 Chrome 或 Firefox 中不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43592594/