html - 删除 webkit 在外部样式表中实现的滚动条后 CSS 格式消失

Question

我有一个奇怪的问题。我有一个外部样式表，其中使用了 webkit 滚动条。现在，我不想再使用它了，但是当我删除实现自定义滚动条的三行代码时，整个 CSS 格式将从使用样式表的所有页面中消失。

带有 webkit 代码的网页。

移除 webkit 代码后的网页。

这是CSS代码：

<style rel="stylesheet" type="text/css">
::-webkit-scrollbar-thumb:vertical {background-color:#70AFB4; height:auto;}
::-webkit-scrollbar-thumb:horizontal {background-color:#70AFB4; height:10px !important;}
::-webkit-scrollbar {height:7px; width:7px; background-color:#E7E6E1;}

body{
background: #F6F6F6;
font-family: Ubuntu,Georgia;
font-size: 16px;
line-height: 150%;
color: #333;    }

h1{
color:#0E0B06;
font-weight:normal;
font-size:40px;
margin-bottom:0px; }

h2{
color:#0E0B06;
font-size:15px;
font-weight:normal;
margin-bottom:0px; }

a{
color:#0E0B06;
padding:1px 2px;
background:#70AFB4;
text-decoration: none; }

a.default {
background:none; }

a:hover{
color:#0E0B06;
background:none; }


.wrapper {
width: 800px margin:auto; }

.header {
margin: 30px 50px 75px 400px; 
width: 400px }

.indexer {
width: 150px;
float: left;
margin: 40px 100px 75px 150px; }

.poster {
width: 700px;
margin: 70px 50px 75px 400px;
padding-bottom: 30px; }

有问题的 webkit 代码：

::-webkit-scrollbar-thumb:vertical {background-color:#70AFB4; height:auto;}
::-webkit-scrollbar-thumb:horizontal {background-color:#70AFB4; height:10px !important;}
::-webkit-scrollbar {height:7px; width:7px; background-color:#E7E6E1;}

Answer 1

如果这是第一行的外部样式表：

<style rel="stylesheet" type="text/css">

那么它是无效的。这样，规则body就不会被采用。

<style>外部 CSS 文件中不需要该标签，这样做会导致错误，从而阻止第一条规则不被执行。

<style rel="stylesheet" type="text/css">从您的 CSS 文件中删除将修复它。