Javascript 浏览器中的 CSS 错误：使用伪时“未知属性名称”：after
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38318932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Error in browser: 'Unknown property name' when using pseudo :after
提问by Code2016
I am getting the following error in Chrome and Explorer when trying to set css property of a pseudo :after. (I'm trying to set a burger nav icon and style it)
尝试设置伪 .css 的 css 属性时，我在 Chrome 和资源管理器中收到以下错误:after。（我正在尝试设置一个汉堡导航图标并为其设置样式）
I am getting the error:
我收到错误：
'Unknown property name'
'未知的属性名称'
when I set the width, height, backgroundetc. of pseudo :after. Here it is in Chrome:
当我设置width，height，background等伪:after。这是在 Chrome 中：
The code that is giving me the error:
给我错误的代码：
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
Full HTML Code
完整的 HTML 代码
<html>
<head>
<title>Delivery Motion!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-3.0.0.min.js"></script>
<script>
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
// Grab the pull (extra menu icon) div and when clicked event handler will bring menu (the old actual menu).
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
// if the window is resized greater than 320px remove the display none attribute from the menu (actual older menu).
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
</script>
</head>
<body>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</body>
</html>
Full CSS Code
完整的 CSS 代码
* {
margin: 0%;
}
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
border: 2px solid;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
/*the menu will have brighter color when it is in :hover or :active state*/
nav a:hover, nav a:active {
background-color: #8c99a4;
}
/*extra link will be hidden (for the desktop screen)*/
nav a#pull {
display: none;
}
/*When the screen size is max 600px the nav ul width will be 50%*/
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint)*/
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
/* Psuedo code :after's width, height, display etc. doesn't work in browsers. showing error.*/
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
????height: 30px;
????display: inline-block;
????position: absolute;
????right: 15px;
????top: 10px;
}
}
/*screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.*/*/
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Any ideas?
有任何想法吗？
回答by Jean-Yves Fargeat
In chrome console you can see that there are 4 apparently incorrectly encoded characters before the last few properties. It matches with the 4 spaces indent . There might be some exotic characters showing as space in your CSS file that didn't make it when you pasted your code in here.
在 chrome 控制台中，您可以看到在最后几个属性之前有 4 个明显错误编码的字符。它与 4 个空格缩进匹配。在您的 CSS 文件中可能有一些异国情调的字符显示为空格，当您将代码粘贴到此处时，这些字符没有出现。
Can you simply try to delete the indenting spaces in front of these properties and see if that works?
您能否简单地尝试删除这些属性前面的缩进空格，看看是否有效？
回答by JonSG
It seems to work in this example that is almost entirely a copy of your code. I know it's a long shot, but maybe reenter your url() in case it has a hidden character in it or restart the browser. After several hours of console work I sometimes need to restart chrome.
在这个几乎完全是代码副本的示例中，它似乎有效。我知道这是一个长镜头，但也许重新输入您的 url() 以防其中包含隐藏字符或重新启动浏览器。经过几个小时的控制台工作后，我有时需要重新启动 chrome。
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
// Grab the pull (extra menu icon) div and when clicked event handler will bring menu (the old actual menu).
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
// if the window is resized greater than 320px remove the display none attribute from the menu (actual older menu).
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});* {
margin: 0%;
}
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
border: 2px solid;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
/*the menu will have brighter color when it is in :hover or :active state*/
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
/*extra link will be hidden (for the desktop screen)*/
nav a#pull {
display: none;
}
/*When the screen size is max 600px the nav ul width will be 50%*/
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint)*/
@media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
/* Psuedo code :after's width, height, display etc. doesn't work in browsers. showing error.*/
nav a#pull:after {
content: "";
background: url('http://lorempixel.com/72/72/') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.*/
*/@media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a>
</li>
<li><a href="#">How-to</a>
</li>
<li><a href="#">Icons</a>
</li>
<li><a href="#">Design</a>
</li>
<li><a href="#">Web 2.0</a>
</li>
<li><a href="#">Tools</a>
</li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>