Таблица стилей в теге <link>не будет отображаться в Firefox или IE - PullRequest
Новая
       4

Таблица стилей в теге <link>не будет отображаться в Firefox или IE

0 голосов
/ 02 мая 2020

У меня есть документ HTML с таблицей стилей, на которую есть ссылка в теге ссылки. Набор символов UTF-8 и определен в файлах HTML и CSS. В Chrome и Microsoft Edge CSS отрисовывается так, как должно, однако в Firefox и IE он не загружается. Нет никаких ошибок в инструментах Консоли разработчика и ошибок компиляции в используемой мной IDE.

Я могу go напрямую к файлу CSS, используя абсолютный путь к файлу в строке URL. и он будет отображать содержимое файла, и он будет отлично * HTML. CSS будет отображаться, когда я заключаю его в теги стиля в самом файле HTML. Однако я хочу связать его с тегом организации.

Я нигде не могу найти решение, хотя у многих людей была эта проблема. Мне интересно, есть ли известное решение, которое могло бы помочь мне.

Вот 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">&times;</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;
}

1 Ответ

2 голосов
/ 02 мая 2020

Может ли быть проблема с обратной косой чертой? 

    <link rel="stylesheet" type="text/css" href="/css/core-test.css" media="screen">

Попробуйте изменить их на прямую косую черту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...