如何解决Bootstrap 3中浏览器特定选择器的css警告？

Question

如何解决Bootstrap 3中浏览器特定选择器的css警告？

只需包含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

Run Code Online (Sandbox Code Playgroud)

(重新格式化代码,stackoverflow让我在描述中添加更多细节.我遇到了同样的问题,这是谷歌搜索结果中最相关的问题,希望有人有解决方案.)

Answer 1

Phi*_*las 15

最值得注意的是Chrome会告诉您它认为那些CSS选择器无效.然而,这并不意味着它们本身和/或普遍无效或者你以某种方式犯了错误.

两个基础编码点:

浏览器(通常)忽略了大多数他们不理解的东西,而且通常也适用于CSS.
虽然浏览器试图遵循核心规范,但在CSS方面,他们因为某些事情拥有自己的CSS属性而臭名昭着,尤其是在支持旧版浏览器时.

因此,考虑到这两点,拥有大量不同浏览器基础(例如,Twitter Bootstrap)的CSS编写者将投入所有CSS选择器,并且对于他们打算支持的所有浏览器都是如此,因为知道IE会忽略选择器由基于WebKit的浏览器支持,Chrome将忽略IE特定的内容,依此类推.

这是处理渐变时这项技术的相关文章:CSS3线性渐变语法细分.

您最近可能会看到警告的另一个原因是

Chrome 27是支持WebKit的最后一个版本.

因此,如果您看到"-webkit-overflow-scrolling"的CSS警告,并且如果您使用的是Chrome 28或更高版本,那么我就会明白为什么您会开始看到与WebKit相关的CSS警告.(我没有对WebKit版本之前和之后的Chrome进行回归测试,以100%确认这一点,但我的Geek Intuition™90%确信这是正在发生的事情).

再一次,我不会担心它,只要你所看到的是你所期待的.一定要使用基于WebKit的浏览器进行测试,以确保WebKit目标代码也能按预期工作.

归档时间：	12 年，6 月前
查看次数：	8906 次
最近记录：	12 年，6 月前