我如何解决在Bootstrap 3中浏览器特定选择器的css警告？ [英] How can i resolve the css warnings for browser specific selectors in Bootstrap 3?
本文介绍了我如何解决在Bootstrap 3中浏览器特定选择器的css警告？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
只要包括bootstrap.js和css文件，并打开google chrome的控制台，有很多无效的CSS属性xxx输出，我没有看到这之前在引导2.3.2
我复制了下面的警告。他们拥挤我的控制台：
无效的CSS选择器：button :: - moz-focus-inner，input :: - moz-focus在public_html / css / bootstrap.min.css：9
上的无效的CSS选择器：.form-control：-moz-placeholder（12：59：57：616 | warning，css） ：59：57：630 | warning，css）
在public_html / css / bootstrap.min.css：9
无效的CSS选择器：.form-control :: - moz-placeholder（12:59： public-html / css / bootstrap.min.css：9
无效的CSS选择器：.form-control：-ms-input-placeholder（12:59:57： public_html / css / bootstrap.min.css：9
无效的CSS属性名：-webkit-overflow-scrolling（12：59：57：662 | warning，css）
at public_html / css / bootstrap.min.css：9
无效的CSS属性值：transform .3s ease-out（12：59：57：663 | warning，css）
在public_html /css/bootstrap.min.css:9
无效的CSS属性值：-webkit-linear-gradient（left，color-stop（rgba（0,0,0,0.5）0），color-stop （0,0,0,0.0001）100％））（12：59：57：664 |警告，css）
在public_html / css / bootstrap.min.css：9
无效的CSS属性值：-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）
在public_html / css / bootstrap.min.css ：9
无效的CSS属性值：-webkit-linear-gradient（top，＃fff，0％，＃e6e6e6,100％）（12：59：57：674 | warning，css）
public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃428bca，0％，＃3071a9,100％）（12:59:57： 675 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃5cb85c，0％，＃449d44 ，100％）（12：59：57：683 | warning，css）
at public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient （top，＃f0ad4e，0％，＃ec971f，100％）（12：59：57：684 | warning，css）
at public_html / css / bootstrap-theme.min.css：1
CSS属性值无效：-webkit-linear-gradient（top，＃d9534f，0％，＃c9302c，100％）（12：59：57：684 |警告，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃5bc0de，0％，＃31b0d5,100 public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top（％））（12：59：57：685 | warning，css） ，＃428bca，0％，＃357ebd，100％）（12：59：57：685 | warning，css）
at public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：public_html / css / bootstrap-theme的-webkit-linear-gradient（top，＃fff，0％，＃f8f8f8,100％）（12：59：57：691 | warning，css）
。 min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃3c3c3c，0％，＃222,100％）（12：59：57：692 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃dff0d8,0％，＃c8e5bc，100％）（12:59:57 ：693 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃d9edf7,0％ b9def0,100％）（12：59：57：694 |警告，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃fcf8e3,0％，＃f8efc0,100 public-html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top（％））（12：59：57：694 | warning，css） ，＃f2dede，0％，＃e7c3c3,100％）（12：59：57：695 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：public-html / css / bootstrap-theme的-webkit-linear-gradient（top，＃ebebeb，0％，＃f5f5f5,100％）（12：59：57：696 | warning，css）
。 min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃428bca，0％，＃3071a9,100％）（12：59：57：696 | warning，css）
at public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃5cb85c，0％，＃449d44,100％） ：57：697 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃5bc0de，0％ ，＃31b0d5,100％）（12：59：57：701 |警告，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃f0ad4e，0％，＃ec971f，100 public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top（％））（12：59：57：701 | warning，css） ，＃d9534f，0％，＃c9302c，100％）（12：59：57：702 | warning，css）
at public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：public_html / css / bootstrap-theme的-webkit-linear-gradient（top，＃428bca，0％，＃3278b3,100％）（12：59：57：702 | warning，css）
。 min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃f5f5f5,0％，＃e8e8e8,100％）（12：59：57：703 | warning，css）
at public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃428bca，0％，＃357ebd，100％） ：57：704 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃dff0d8,0％ ，＃d0e9c6,100％）（12：59：57：704 |警告，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top，＃d9edf7,0％，＃c4e3f3,100 public-html / css / bootstrap-theme.min.css：1
无效的CSS属性值：-webkit-linear-gradient（top（％））（12：59：57：705 | warning，css） ，＃fcf8e3,0％，＃faf2cc，100％）（12：59：57：705 | warning，css）
在public_html / css / bootstrap-theme.min.css：1
无效的CSS属性值：public_html / css / bootstrap-theme的-webkit-linear-gradient（top，＃f2dede，0％，＃ebcccc，100％）（12：59：57：706 | warning，css）
。 min.css：1
无效的CSS属性值：-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选择器无效。然而，这并不意味着它们是固有的和/或普遍无效的，或者你在某种程度上错误。
两个基本编码点：
- 浏览器（通常）忽略大多数他们不明白的东西，通常也适用于CSS。
- 虽然浏览器尝试遵循核心规范，但是当涉及CSS时，他们为某些特定的东西拥有自己的CSS属性而臭名昭着，尤其是在支持旧版浏览器时。
因此，考虑到这两点，具有大量不同浏览器基础的CSS编写者（例如Twitter Bootstrap）将抛出所有的CSS选择器等，他们打算支持的所有浏览器，知道IE将忽略基于WebKit的浏览器支持的选择器，Chrome会忽略IE的具体情况，等等。
这是一个关于此技术的相关文章处理渐变时： CSS3 Linear Gradient Syntax Breakdown 。
您最近可能会看到警告的另一个原因是 / p>
因此，如果您看到-webkit-溢出滚动，如果你使用Chrome 28或更高版本，那么我可以看到为什么你会开始看到WebKit相关的CSS警告。 （我没有回归测试与前和后WebKit版本的Chrome到100％确认这一点，但我的Geek Intuition™是90％的自信，这是在这里）。
再次，我不会担心，只要你看到的是你的期望。请务必使用基于WebKit的浏览器进行测试，以确保WebKit目标代码也能正常工作。
Just include bootstrap.js and css files and open google chrome's console, there are a lot of "Invalid CSS property xxx" outputs, I haven't seen this before on bootstrap 2.3.2
I've copied the warnings below. They crowd my console:
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
( Reformatting the code, stackoverflow asked me to add more details in description. I hit the same issue and this is the most relevant question in google search results, hopefully someone has a solution. )
解决方案
The most important thing to note is that Chrome is telling you that it thinks those CSS selectors are invalid. That does not, however, mean they're inherently and/or universally invalid or that you've erred in some way.
Two foundational coding points:
- Browsers (usually) ignore most things they don't understand and that generally goes for CSS as well.
- While browsers try to adhere to the core specifications, when it comes to CSS they're notorious for having their own CSS attributes for certain things, especially when supporting legacy browsers.
So, with those two things in mind, CSS writers who have a large, varied browser base to support (e.g., Twitter Bootstrap) will throw in all the CSS selectors and such for all browsers they intend to support, knowing that IE will ignore selectors supported by WebKit-based browsers, and Chrome will ignore IE-specifics, and so on.
Here's a related article on this technique when handling gradients: CSS3 Linear Gradient Syntax Breakdown.
Another reason you might be seeing the warning recently is that
So if you see a CSS warning for "-webkit-overflow-scrolling" and if you're using Chrome 28 or later then I can see why you'd start seeing WebKit-related CSS warnings. (I didn't regression test with pre- and post-WebKit versions of Chrome to 100% confirm this, but my Geek Intuition™ is 90% confident that's what is going on here).
Again, I wouldn't worry about it, so long as what you're seeing is what you're expecting. Be sure to test with a WebKit-based browser to make sure the WebKit-targeted code works as expected, too.
这篇关于我如何解决在Bootstrap 3中浏览器特定选择器的css警告？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
