logo标签列表

如何解决Bootstrap 3中特定于浏览器的选择器所引发的CSS警告？

csstwitter-bootstrap-3
10

只需包含bootstrap.js和css文件，打开Google Chrome的控制台，在那里会有许多“无效的CSS属性xxx”的输出，我在bootstrap 2.3.2中从未见过这种情况。

下面是我复制的警告信息，它们占据了我的控制台：

Invalid CSS selector: button::-moz-focus-inner,input::-moz-focus-inner (12:59:57:616 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS selector: .form-control:-moz-placeholder (12:59:57:630 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS selector: .form-control::-moz-placeholder (12:59:57:631 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS selector: .form-control:-ms-input-placeholder (12:59:57:661 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS property name: -webkit-overflow-scrolling (12:59:57:662 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS property value: transform .3s ease-out (12:59:57:663 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS property value: -webkit-linear-gradient(left,color-stop(rgba(0,0,0,0.5) 0),color-stop(rgba(0,0,0,0.0001) 100%)) (12:59:57:664 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS property value: -webkit-linear-gradient(left,color-stop(rgba(0,0,0,0.0001) 0),color-stop(rgba(0,0,0,0.5) 100%)) (12:59:57:670 | warning, css)
  at public_html/css/bootstrap.min.css:9
Invalid CSS property value: -webkit-linear-gradient(top,#fff,0%,#e6e6e6,100%) (12:59:57:674 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#428bca,0%,#3071a9,100%) (12:59:57:675 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#5cb85c,0%,#449d44,100%) (12:59:57:683 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#f0ad4e,0%,#ec971f,100%) (12:59:57:684 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#d9534f,0%,#c9302c,100%) (12:59:57:684 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#5bc0de,0%,#31b0d5,100%) (12:59:57:685 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#428bca,0%,#357ebd,100%) (12:59:57:685 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#fff,0%,#f8f8f8,100%) (12:59:57:691 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#3c3c3c,0%,#222,100%) (12:59:57:692 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#dff0d8,0%,#c8e5bc,100%) (12:59:57:693 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#d9edf7,0%,#b9def0,100%) (12:59:57:694 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#fcf8e3,0%,#f8efc0,100%) (12:59:57:694 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#f2dede,0%,#e7c3c3,100%) (12:59:57:695 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#ebebeb,0%,#f5f5f5,100%) (12:59:57:696 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#428bca,0%,#3071a9,100%) (12:59:57:696 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#5cb85c,0%,#449d44,100%) (12:59:57:697 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#5bc0de,0%,#31b0d5,100%) (12:59:57:701 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#f0ad4e,0%,#ec971f,100%) (12:59:57:701 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#d9534f,0%,#c9302c,100%) (12:59:57:702 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#428bca,0%,#3278b3,100%) (12:59:57:702 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#f5f5f5,0%,#e8e8e8,100%) (12:59:57:703 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#428bca,0%,#357ebd,100%) (12:59:57:704 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#dff0d8,0%,#d0e9c6,100%) (12:59:57:704 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#d9edf7,0%,#c4e3f3,100%) (12:59:57:705 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#fcf8e3,0%,#faf2cc,100%) (12:59:57:705 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#f2dede,0%,#ebcccc,100%) (12:59:57:706 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1
Invalid CSS property value: -webkit-linear-gradient(top,#e8e8e8,0%,#f5f5f5,100%) (12:59:57:707 | warning, css)
  at public_html/css/bootstrap-theme.min.css:1

重新格式化代码，stackoverflow要求我在描述中添加更多细节。我遇到了同样的问题，这是谷歌搜索结果中最相关的问题，希望有人能提供解决方案。

你能否编辑一下你的问题，让它更具体一些？这是一个有用的问题。发生的情况是你正在使用特定于浏览器的CSS扩展，它们不适用并显示为警告。 - Chris Pfohl
4
@ChristopherPfohl，我遇到了同样的问题，因此编辑了问题，希望有人能够帮助。 - Realfun
1个回答
15
最重要的一点是Chrome告诉你，它认为这些CSS选择器是无效的。然而，这并不意味着它们本质上或普遍地无效，也不意味着你犯了错误。
两个基础编码要点：
1. 浏览器（通常）会忽略大多数它们不理解的东西，这通常也适用于CSS。 2. 虽然浏览器尝试遵循核心规范，但当涉及到CSS时，它们以支持旧版浏览器为主要目标，因此对某些属性有自己的CSS属性。
因此，考虑到这两点，CSS编写者需要支持大量、多样化的浏览器（例如Twitter Bootstrap），会为他们打算支持的所有浏览器添加所有的CSS选择器等，知道IE将忽略WebKit-based浏览器支持的选择器，Chrome将忽略IE-specifics，等等。
这里有一篇相关文章，介绍了处理渐变时使用的技术：CSS3 Linear Gradient Syntax Breakdown。
另一个你最近可能看到警告的原因是：

因此，如果您在使用 Chrome 28 或更高版本时看到“-webkit-overflow-scrolling”的 CSS 警告，则我可以理解为什么您会开始看到与 WebKit 相关的 CSS 警告。（我没有使用 Chrome 的前后 WebKit 版本进行回归测试以 100％ 确认这一点，但我的 Geek Intuition™ 有 90％ 的把握这就是问题所在）。

同样，只要您看到的是您预期的内容，就不必担心。确保使用基于 WebKit 的浏览器进行测试，以确保针对 WebKit 的代码也能按预期工作。

谢谢Phil。我只希望我能过滤或关闭NetBeans控制台中的这些警告，以便不会错过更有用的错误信息。我可以轻松地在Chrome中关闭警告，但无法在我的集成NetBeans中实现。 - vt97john
不用谢。我做了一些研究，看起来许多NetBeans用户对“警告”感到恼火（因为警告是不合理的，看起来应该是“信息”），其中一些人甚至将其提交为错误报告。顺便说一句，我的答案是对你问题的满意答案，你能把它标记为已接受的答案吗？这个帖子仍然显示为未发布已接受的答案，我会感激你的帮助 :-) 谢谢。 - Phil Nicholas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接