浏览器中的CSS错误：使用伪：after时出现“未知属性名称” [英] CSS Error in browser: 'Unknown property name' when using pseudo :after
问题描述
尝试设置伪：after 的css属性时，Chrome和Explorer中出现以下错误。 （我正在尝试设置汉堡导航图标并设置其样式）
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)
我遇到了错误：
未知属性名称
'Unknown property name'
当我设置宽度，高度，背景等，在伪造的 ：之后。就是在Chrome中：
when I set the width, height, background etc. of pseudo :after. Here it is in Chrome:
给出错误的代码：
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;
完整的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>
完整的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;
}
}
有什么想法吗？
推荐答案
在chrome控制台中，您可以看到在最后几个属性之前有4个显然编码错误的字符。它与4个空格缩进匹配。
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.
您可以简单地尝试删除缩进吗？这些属性前面的空格，看看是否可行？
Can you simply try to delete the indenting spaces in front of these properties and see if that works?
这篇关于浏览器中的CSS错误：使用伪：after时出现“未知属性名称”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
