jQuery 导致 Firefox box-sizing 警告

标签 jquery css firefox web-developer-toolbar

我有 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>

最佳答案

选项

  1. 使用 jQuery 1.7.2。
  2. 向 jQuery 团队提出问题并希望得到修复(或自己提供)。
  3. 使用 Firebug 而不是 WebDeveloper(这可能有帮助也可能没有帮助)。
  4. 忽略它。

只要页面正确呈现,我相信这是一个您可以放心忽略的警告,即使您正在构建一个严格要求验证 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/

相关文章:

jquery - 如果点击页面, Bootstrap 导航栏 'active' 将失去持久性

javascript - Uncaught ReferenceError : JSZip is not defined

css - IE8负边距问题

css - 如何在流畅的布局上显示 X + (1/3) 图像?

css - 添加解析条件时我的媒体查询不起作用,我该怎么办?

css - IIS 6 + MVC 3 + CSS - 使用 Chrome/FireFox/Safari,CSS 样式不显示 >>帮助

javascript - 使用 javascript 更改数据属性

javascript - 简单的 javascript jQuery 代码在 Chrome 中工作,而不是在 Firefox、Safari、IE 中工作

internet-explorer - 恢复浏览器文本区域

javascript - 浏览器如何自动将 "Page Source"Javascript 转换为 HTML?