【发布时间】：2016-11-14 02:36:01
【问题描述】：
尝试设置伪 :after 的 css 属性时，我在 Chrome 和资源管理器中收到以下错误。 （我正在尝试设置一个汉堡导航图标并为其设置样式）
我收到了错误：
'未知属性名称'
当我设置width、height、background等伪:after时。它在 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;
}
}
有什么想法吗？
【问题讨论】：
-
可以创建一个plnkrplnkr.co来演示吗？
-
是在触发汉堡点击之后发生的吗？还是直接在页面加载？？
-
就我而言，我再次仔细检查拼写，发现拼写错误
标签： javascript html css