链接样式表中缺少 CSS 元素答案

【问题标题】：Missing CSS Elements from Linked Stylesheet链接样式表中缺少 CSS 元素
【发布时间】：2019-04-01 03:20:22
【问题描述】：

我有一个简单的表格，我试图在其中右对齐输入。我遇到的问题是让输入属性应用我在 CSS 文件中包含的右对齐属性。当我在 Chrome 数据检查器中查看 CSS 文件时，它只显示 .table-responsive 属性，而不是 input 或 table 属性。如果我在 chrome 检查器中手动键入它们应用的属性，那么我认为这不是我的结构。

我想知道为什么只显示 .table-responsive 属性而不显示其他属性？我读过它可能是格式错误，但我无法找出我的格式可能出错的地方。

我正在使用引导程序和引导程序主题，以防万一。

CSS

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

input {
    text-align: right;
}

.table-responsive {
    display: contents;
}

Chrome 检查器 CSS

.table-responsive {
    display: contents;
}

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style/Journalize.css" />

        <title>Journalize</title>
    </head>

</html>
    <body>
        <br/>
        <h2>Journalize</h2>
        <form action="" method="post">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <table border="1" class="table-responsive table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Transaction ID</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Account</th>
                                <th>Debit</th>
                                <th>Credit</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <?php retrieveJournal(); ?>

PHP

function retrieveJournal() {
        ...
            echo '<tr align="center">';
                echo '<td> <span>' .$row['transaction_id']. '</span> </td>';
                echo '<td> 
                        <select name="status[]">
                            <option '.$approvedStatus.'>Approved</option>
                            <option '.$pendingStatus.'>Pending</option>
                            <option '.$rejectedStatus.'>Rejected</option>
                        </select>
                    </td>';
                echo '<td> <input name="transactiondate[]" readonly value="' .$row['transaction_date']. '"> </td>';
                echo '<td> 
                        <select name="transactiontype[]">
                            <option '.$normalType.'>Normal</option>
                            <option '.$adjustingType.'>Adjusting</option>
                            <option '.$closingType.'>Closing</option>
                        </select>
                    </td>';
                echo '<td>
                        <input name="transactionaccount[]" readonly value="' .$accountRow['account_name']. '">
                        <br/>
                        <span>Description: </span><input name="description[]" value ="' .$row['description']. '">
                      </td>';
                echo '<td> <input name="debitAmount[]" readonly value="' .$row['debit_amount']. '"> </td>';
                echo '<td> <input name="creditAmount[]" readonly value="' .$row['credit_amount']. '"> </td>';
                echo '<td> <input name="user_id[]" readonly value="' . $usernameRow['username'] . '"> </td>';
            echo '</tr>';
        } 
    }

【问题讨论】：

标签： php html css twitter-bootstrap

【解决方案1】：

这些元素未显示在开发人员选项中的原因是，您的浏览器缓存了旧版本的 CSS 文件。

可以通过在末尾添加随机版本号来阻止浏览器加载缓存文件，例如：

<link rel="stylesheet" type="text/css" href="style/Journalize.css?v=<?= date("Ymd") . time(); ?>" />

为您提供始终是新版本的输出，因此浏览器无法加载旧的缓存版本。

style/Journalize.css?v=201810271540661219

【讨论】：

太棒了。我应该隐身测试它，因为这证实了你所说的。非常感谢！
你知道为什么进入选项并通过“Cookies”页面手动清除网站不能解决这个问题吗？我在发布问题之前尝试过，但似乎这并没有解决缓存问题。
浏览器不使用cookies缓存，你需要去Options > Advanced > Clear Browsing data > Cached images and files > Clear data。希望这会有所帮助。
有道理。再次感谢！ :)