html - 标签中的样式表不会在 Firefox 或 IE 中呈现
问题描述
我有一个 HTML 文档，其中包含链接标记中引用的样式表。字符集是 UTF-8，在 HTML 和 CSS 文件中定义。在 Chrome 和 Microsoft Edge 中，CSS 会按应有的方式呈现，但在 Firefox 和 IE 中它不会加载它。开发人员工具的控制台中没有任何错误，我正在使用的 IDE 中也没有编译错误。
我可以使用 URL 栏中的绝对文件路径直接转到 CSS 文件，它会显示文件的内容，并且会很好地呈现 HTML。当我将 CSS 包含在 HTML 文件本身的样式标签中时，CSS 将呈现。但是，我想为组织链接标签。
即使很多人都遇到过这个问题，我也无法在任何地方找到解决方案。我想知道是否有一个已知的解决方案可以帮助我。
这是HTML：
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="\css\core-test.css" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar">
<a>#</a>
</nav>
<div class="table-box">
<div class="table-body">
<table id="main-table" class="table">
<thead>
<tr>
<th>TIME</th>
<th>TICKER</th>
<th>CALL/PUT</th>
<th>EXPIRY</th>
<th>STRIKE</th>
<th>SPOT</th>
<th>PRICE</th>
<th>SIZE</th>
<th>TOTAL</th>
<th>OI</th>
<th>IV</th>
<th><button id="filterbtn" class="filterbtn fa fa-filter"></button></th>
</tr>
</thead>
<tbody>
<tr>
<td>00:12:34</td>
<td class="btc-color">BTC</td>
<td class="put-color">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td class="put-color">₿62</td>
<td>1120</td>
<td>60.9%</td>
<td><button class="chartbtn fa fa-line-chart"></button></td>
</tr>
<tr>
<td>00:12:34</td>
<td class="btc-color">BTC</td>
<td class="put-color">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td class="put-color">₿62</td>
<td>1120</td>
<td>60.9%</td>
<td><button class="chartbtn fa fa-line-chart"></button></td>
</tr>
</tbody>
</table>
<div id="option-modal" class="option-modal">
<div id="option-modal-box" class="option-modal-box">
<span id="closebtn" class="closebtn">×</span>
<div id="option-modal-header" class="option-modal-header">
<a id="option-modal-header-title" class="btc-color option-modal-header-title">BITCOIN</a>
</div>
<div id="option-modal-body" class="option-modal-body">
<div id="chart-box" class="chart-box">
<div class="box-header">
<a class="box-title">Chart</a>
</div>
<div style="background-color: gray;" class="box-body">
<a>chart-box</a>
</div>
</div>
<div id="orderbook-box" class="orderbook-box">
<div class="box-header">
<a class="box-title">Orderbook</a>
</div>
<div class="box-body">
<div class="orderbook-bid-body">
<table id="orderbook-bid-table" class="orderbook-bid-table">
<thead>
<tr>
<th>TOTAL</th>
<th>SIZE</th>
<th>BID</th>
</tr>
<tbody>
<tr>
<td>1.0</td>
<td>1.0</td>
<td class="call-color">0.031</td>
</tr>
<tr>
<td>1.0</td>
<td>1.0</td>
<td class="call-color">0.031</td>
</tr>
</tbody>
</thead>
</table>
</div>
<div class="orderbook-ask-body">
<table class="orderbook-ask-table">
<thead>
<tr>
<th>ASK</th>
<th>SIZE</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="put-color">0.032</td>
<td>1.0</td>
<td>1.0</td>
</tr>
<tr>
<td class="put-color">0.032</td>
<td>1.0</td>
<td>1.0</td>
</tr>
</table>
</div>
</div>
</div>
<div id="stat-box" class="stat-box">
<div class="box-header">
<a class="box-title">Greeks</a>
</div>
<div class="box-body">
<table id="greek-table" class="option-modal-table">
<thead>
<tr>
<th>MARK</th>
<th>OI</th>
<th>IV</th>
<th>DELTA</th>
<th>THETA</th>
<th>VEGA</th>
<th>GAMMA</th>
</tr>
</thead>
<tbody>
<tr>
<td id="mark-greek">0.031</td>
<td id="oi-greek">1120.0</td>
<td id="iv-greek">60.9%</td>
<td id="delta-greek">-0.2</td>
<td id="thelta-greek">-9.0</td>
<td id="vega-greek">1.23</td>
<td id="gamma-greek">0.00012</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="trade-box" class="trade-box">
<div class="box-header">
<a class="box-title">Recent Trades</a>
</div>
<div class="box-body">
<table id="trade-table" class="option-modal-table">
<thead>
<tr>
<th>PRICE</th>
<th>IV</th>
<th>SIZE</th>
<th>TIME</th>
</tr>
</thead>
<tbody>
<tr>
<td>0.032</td>
<td>60.9%</td>
<td>1</td>
<td class="call-color">00:12:34</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var optionModal = document.getElementById("option-modal");
var chartButton = document.getElementsByClassName("chartbtn");
var closeButton = document.getElementById("closebtn");
function openChart() {
optionModal.style.display = "block";
}
for (var i = 0; i < chartButton.length; i++) {
chartButton[i].addEventListener("click", openChart);
}
window.onclick = function(event) {
if (event.target == optionModal) {
optionModal.style.display = "none";
}
}
closeButton.onclick = function(event) {
if (event.target == closeButton) {
optionModal.style.display = "none";
}
}
</script>
</html>
这是CSS：
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@charset "utf-8";
:root {
--bg: #060c17;
--item-bg: #0c1427;
--main-font-color: white;
--border: #262f43;
--th-bg: black;
--th-font: #7886a1;
--btc: #ff8133;
--eth: #106fb7;
--call: #10b759;
--put: #ff3366;
--main-font: 'Overpass', sans-serif;
}
.container {
display: flex;
flex-direction: column;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 0;
background-color: var(--bg);
}
.navbar {
position: fixed;
padding: 20px;
top: 0;
right: 0;
left: 0;
width: 100%;
text-align: center;
background: var(--item-bg);
border-bottom: 1px solid var(--border);
}
.navbar a {
color: var(--main-font-color);
font-size: 20px;
font-family: var(--main-font);
}
.table-box {
display: flex;
border-radius: 0.25rem;
margin-top: 75px;
margin-bottom: 1px;
height: 100%;
width: 99%;
background-color: var(--item-bg);
border: 1px solid var(--border);
overflow: hidden;
}
.filterbtn {
color: var(--th-font);
background-color: var(--th-bg);
font-size: 14px;
border: none;
cursor: pointer;
}
.table-body {
position: relative;
margin-top: 40px;
width: 100%;
overflow: auto;
border-top: 1px solid var(--border);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.table thead {
color: var(--th-font);
}
.table tbody {
color: var(--main-font-color);
}
.table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.chartbtn {
font-size: 14px;
border: none;
border-radius: 0.25rem;
cursor: pointer;
color: var(--th-font);
background-color: var(--th-bg);
}
.table thead th,
.table tbody td {
text-align: left;
padding: 10px 10px;
border-bottom: 1px solid var(--border);
}
.table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.btc-color {
color: var(--btc);
}
.eth-color {
color: var(--eth);
}
.call-color {
color: var(--call);
}
.put-color {
color: var(--put);
}
.option-modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 20px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.option-modal-box {
display: flex;
margin: auto;
height: 95%;
width: 90%;
background-color: var(--item-bg);
border: 1px solid var(--border);
border-radius: 0.25rem;
overflow: hidden;
}
.closebtn {
padding-top: 0.5%;
right: 6%;
cursor: pointer;
font-size: 20px;
font-family: var(--main-font);
position: fixed;
color: var(--main-font-color);
}
.option-modal-header {
position: fixed;
margin: 5px;
}
.option-modal-header-title {
position: sticky;
font-family: var(--main-font);
font-size: 20px;
}
.option-modal-body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: 40px;
height: 90%;
width: 100%;
background-color: var(--item-bg);
overflow: auto;
}
.option-modal-body div {
min-width: 50%;
}
.orderbook-bid-body {
display: inline-table;
}
.orderbook-bid-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.orderbook-bid-table thead {
color: var(--th-font);
}
.orderbook-bid-table tbody {
color: var(--main-font-color);
}
.orderbook-bid-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.orderbook-bid-table thead th,
.orderbook-bid-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-collapse: collapse;
}
.orderbook-bid-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.orderbook-ask-body {
float: right;
}
.orderbook-ask-table {
position: relative;
padding-bottom: 10px;
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.orderbook-ask-table thead {
color: var(--th-font);
}
.orderbook-ask-table tbody {
color: var(--main-font-color);
}
.orderbook-ask-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.orderbook-ask-table thead th,
.orderbook-ask-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.orderbook-ask-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
.option-modal-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--main-font);
}
.option-modal-table thead {
color: var(--th-font);
}
.option-modal-table tbody {
color: var(--main-font-color);
}
.option-modal-table thead th {
position: sticky;
top: 0;
background-color: var(--th-bg);
}
.option-modal-table thead th,
.option-modal-table tbody td {
text-align: center;
padding: 5px 0px;
border-bottom: 1px solid var(--border);
}
.option-modal-table tbody tr:nth-child(even) {
background-color: var(--bg);
}
@media screen and (max-width: 800px) {
.chart-box {
width: 100%;
}
.orderbook-box {
width: 100%;
}
.stat-box {
order: 4;
width: 100%;
}
.trade-box {
width: 100%;
order: 3;
}
}
.chart-box {
height: 50%;
overflow: hidden;
}
.orderbook-box {
height: 50%;
overflow: hidden;
}
.stat-box {
height: 49%;
overflow: hidden;
}
.trade-box {
height: 49%;
overflow: hidden;
}
.box-header {
height: 6%;
padding: 5px;
}
.box-title {
color: var(--main-font-color);
font-family: var(--main-font);
font-size: 16px;
margin: auto;
}
.box-body {
border: 1px solid var(--border);
height: 89%;
overflow: auto;
}
解决方案
反斜杠可能是问题吗？
<link rel="stylesheet" type="text/css" href="/css/core-test.css" media="screen">
尝试将它们更改为正斜杠。
推荐阅读
- reactjs - 无法读取 null 的属性“ownerDocument”
- module - 如何将 lmod 与鱼一起使用？
- flowtype - 带有联合参数的函数间接导致联合成员出现莫名其妙的错误
- database - 我如何阅读 blcokfile_xxxx
- python - SQLalchemy-如何从 sqlite 文件中提取表？
- api - YouTube 频道：列表 API 未按顺序返回
- firebase - Firebase 托管是否有请求限制？
- python-3.x - 有时在函数内部时，质数生成器最后不返回任何内容
- javascript - 查找值的 XML 节点位置的最简单方法是什么？
- c# - 如何在运行时创建新的父子游戏对象？