我有 WebDeveloper 扩展,但收到 CSS 警告,所以我去调查了它。警告是以下 3 种:
Warning: Unknown property 'box-sizing'. Declaration dropped.
Line: 0
然后我制作了一个空白文件,发现它不在那里。几分钟后,我发现了一个可重现的原因:包括 jQuery 1.9.1 脚本!
我可以或应该做什么?我想使用 jquery,但我发现工具栏中永远会出现 CSS 警告,这有点烦人。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>Empty</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>
最佳答案
选项
- 使用 jQuery 1.7.2。
- 向 jQuery 团队提出问题并希望得到修复(或自己提供)。
- 使用 Firebug 而不是 WebDeveloper(这可能有帮助也可能没有帮助)。
- 忽略它。
只要页面正确呈现,我相信这是一个您可以放心忽略的警告,即使您正在构建一个严格要求验证 CSS 的网站也是如此。
一旦 Firefox 完全支持 box-sizing
(不需要 -moz-
前缀),警告就会消失,但这不会发生,直到Firefox 21 之后的一些版本。
背景信息
该警告源于某些 CSS 样式所需的不同语法。要支持所有浏览器,您通常必须指定所有各种语法。浏览器将忽略它们不认识的内容。
在 box-sizing
的情况下,Firefox 需要 -moz-
前缀,早期版本的 Safari Mobile 和 Android 浏览器需要 -webkit-
前缀,而其他浏览器根本不需要前缀:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
添加线性渐变时会出现类似的问题,在这种情况下是由值而不是属性名称引起的:
background-image: -webkit-linear-gradient(top, #444, #999);
background-image: -moz-linear-gradient(top, #444, #999);
background-image: -ms-linear-gradient(top, #444, #999);
background-image: -o-linear-gradient(top, #444, #999);
background-image: linear-gradient(top, #444, #999);
当警告因使用的不同语法而出现时,通常是验证器或错误控制台不够智能,无法从通常不可避免的无害问题中识别出真正的问题。公平地说,它实际上被识别为警告,而不是错误。
附加信息
较新版本的 jQuery 出于内部目的使用 box-sizing
样式。 jQuery 1.8.0 只产生一个 box-sizing
警告,而 jQuery 1.7.2 不产生任何警告。
jQuery 可能会以一种稍微粗心的方式使用它——没有首先测试它是否有某种类型的支持——但没有造成任何实际伤害。如果是这样,如果有足够多的人向 jQuery 团队提示它,jQuery 代码可能会被重构以解决这个问题(代价是 jQuery 运行速度稍慢)。
如果警告是关于 -moz-box-sizing
而不是 box-sizing
,那更有可能表明 Firefox 可能存在错误,而不是 Firefox 的小问题jQuery。
关于jQuery 导致 Firefox box-sizing 警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15306923/