验证错误“Value Error : background-position Too many values or values are not”如何解决？答案

【问题标题】：Validatation error "Value Error : background-position Too many values or values are not" How to solve?验证错误“Value Error : background-position Too many values or values are not”如何解决？
【发布时间】：2023-03-12 16:30:01
【问题描述】：

为什么验证会返回此错误。如何解决？

ul#navigation li#navigation-3 a.current

值错误：背景位置太许多价值观或价值观不是识别：-164px -164px -36px -164px -164px -36px

这是错误屏幕。

alt text http://shup.com/Shup/321632/110323115458-My-Desktop.png

CSS

ul#navigation { height: 36px; left: 300px; list-style-image: none; list-style-position: outside; list-style-type: none; position: relative; top: 74px; width: 603px; }

ul#navigation li { display: inline; }

ul#navigation li a { height: 36px; float: left; text-decoration: none;  }

ul#navigation li a:link, ul#navigation li a:visited {font-family:Arial; color:#595959; font-size:1.1em; font-weight:bold }

ul#navigation li a:hover, ul#navigation li a:active {color:#404040}

ul#navigation li a span { display:block;
float:left;
padding-left:8px;
padding-top:14px;}

ul#navigation li#navigation-1 a { width: 53px; background: url(../images/menu-sprite.jpg) no-repeat 0px 0; }


ul#navigation li#navigation-1 a:active, ul#navigation li#navigation-1 a:hover { background-position: 0px -36px; }

ul#navigation li#navigation-1 a.current { background-position: 0px 0px -36px; }

ul#navigation li#navigation-2 a { width: 111px; background: url(../images/menu-sprite.jpg) no-repeat -53px 0; }

ul#navigation li#navigation-2 a:active, ul#navigation li#navigation-2 a:hover { background-position: -53px -36px; }

ul#navigation li#navigation-2 a.current { background-position: -53px -53px -36px; }

ul#navigation li#navigation-3 a { width: 78px; background: url(../images/menu-sprite.jpg) no-repeat -164px 0; }

ul#navigation li#navigation-3 a:active, ul#navigation li#navigation-3 a:hover { background-position: -164px -36px; }

ul#navigation li#navigation-3 a.current { background-position: -164px -164px -36px; }

ul#navigation li#navigation-4 a { width: 100px; background: url(../images/menu-sprite.jpg) no-repeat -242px 0; }

ul#navigation li#navigation-4 a:active, ul#navigation li#navigation-4 a:hover { background-position: -242px -36px; }

ul#navigation li#navigation-4 a.current { background-position: -242px -242px -36px; }

ul#navigation li#navigation-5 a { width: 88px; background: url(../images/menu-sprite.jpg) no-repeat -342px 0; }

ul#navigation li#navigation-5 a:active, ul#navigation li#navigation-5 a:hover { background-position: -342px -36px; }

ul#navigation li#navigation-5 a.current { background-position: -342px -342px -36px; }

ul#navigation li#navigation-6 a { width: 96px; background: url(../images/menu-sprite.jpg) no-repeat -430px 0; }

ul#navigation li#navigation-6 a:active, ul#navigation li#navigation-6 a:hover { background-position: -430px -36px; }

ul#navigation li#navigation-6 a.current { background-position: -430px -430px -36px; }

ul#navigation li#navigation-7 a { width: 77px; background: url(../images/menu-sprite.jpg) no-repeat -526px 0; }

ul#navigation li#navigation-7 a:active, ul#navigation li#navigation-7 a:hover { background-position: -526px -36px; }

ul#navigation li#navigation-7 a.current { background-position: -526px -526px -36px; }

【问题讨论】：

背景位置：左值上值；这就是它的工作原理，这就是 W3C 验证告诉你的：P

标签： xhtml w3c w3c-validation css

【解决方案1】：

你有这个：

ul#navigation li#navigation-3 a.current { background-position: -164px -164px -36px; }

定位背景只需要两个值，去掉一个，它应该验证。

更新：你的所有 current 选择器上都有这个，从所有选择器中删除第三个值就可以了。

【讨论】：

我使用这个工具制作了这段代码lab.mattvarone.com/navbar 代码工作正常，但出现验证错误。
网页仍然是二维的。 ;-)
即便如此，代码是错误的，删除其中一个值，它应该验证。并非每个工具都是完美的，您总是需要自己检查生成的代码:) 哈哈@Gumbo！
所以您使用了一个工具，该工具生成了（某些）浏览器能够纠正错误的损坏代码。大呼。代码仍然是错误的。如果我们只需要“它在我的浏览器中工作”，我们就不会为验证器而烦恼。
@David Dorward：但您只能看到该模型的二维投影。

【解决方案2】：

Background-position 得到 2 个值而不是 3 个。 See here

【讨论】：