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



只需包含bootstrap.js和css文件并打开谷歌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要求我在描述中添加更多细节。我遇到了同样的问题,这是谷歌搜索结果中最相关的问题,希望有人能找到解决方案。)

需要注意的最重要的一点是,Chrome告诉您认为那些CSS选择器无效。然而,这并不意味着它们天生和/或普遍无效,也不意味着你在某种程度上犯了错误。

两个基本编码点:

  1. 浏览器(通常)忽略大多数他们不理解的东西,这通常也适用于CSS
  2. 虽然浏览器试图遵守核心规范,但在CSS方面,它们因在某些方面拥有自己的CSS属性而臭名昭著,尤其是在支持传统浏览器时

因此,考虑到这两件事,拥有大量不同浏览器基础的CSS作者(例如,Twitter Bootstrap)将为他们打算支持的所有浏览器提供所有CSS选择器,因为他们知道IE将忽略基于WebKit的浏览器支持的选择器,Chrome将忽略IE细节,等等

这里有一篇关于处理渐变时该技术的相关文章:CSS3线性渐变语法分解。

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

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

因此,如果你看到"-webkit溢出滚动"的CSS警告,如果你使用的是Chrome 28或更高版本,那么我可以理解为什么你会开始看到与webkit相关的CSS警告。(我没有用WebKit之前和之后的Chrome版本进行回归测试来100%确认这一点,但我的Geek Intuition™90%的人对此有信心)。

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

相关内容

最新更新