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

前端之家收集整理的这篇文章主要介绍了css3 – 如何在Bootstrap 3中解决浏览器特定选择器的css警告?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
只需包含bootstrap.js和css文件,并打开google chrome的控制台,有很多“无效的CSS属性xxx”输出,我以前没有看到这个在引导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.5) 0),0.0001) 100%)) (12:59:57:664 | warning,0.0001) 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,#3071a9,100%) (12:59:57:675 | warning,#5cb85c,#449d44,100%) (12:59:57:683 | warning,#f0ad4e,#ec971f,100%) (12:59:57:684 | warning,#d9534f,#c9302c,#5bc0de,#31b0d5,100%) (12:59:57:685 | warning,#357ebd,#f8f8f8,100%) (12:59:57:691 | warning,#3c3c3c,#222,100%) (12:59:57:692 | warning,#dff0d8,#c8e5bc,100%) (12:59:57:693 | warning,#d9edf7,#b9def0,100%) (12:59:57:694 | warning,#fcf8e3,#f8efc0,#f2dede,#e7c3c3,100%) (12:59:57:695 | warning,#ebebeb,#f5f5f5,100%) (12:59:57:696 | warning,100%) (12:59:57:697 | warning,100%) (12:59:57:701 | warning,100%) (12:59:57:702 | warning,#3278b3,#e8e8e8,100%) (12:59:57:703 | warning,100%) (12:59:57:704 | warning,#d0e9c6,#c4e3f3,100%) (12:59:57:705 | warning,#faf2cc,#ebcccc,100%) (12:59:57:706 | warning,100%) (12:59:57:707 | warning,css)
  at public_html/css/bootstrap-theme.min.css:1

(
重新格式化代码,stackoverflow要求我在描述中添加更多的细节.我遇到同样的问题,这是Google@R_404_345@中最相关的问题,希望有人有解决方案.
)

解决方法

最重要的是要注意,Chrome告诉你,它认为这些CSS选择器是无效的.然而,这并不意味着它们本质上和/或普遍无效,或者你以某种方式发生错误.

两个基本编码点:

>浏览器(通常)忽略大多数他们不明白的东西,通常也适用于CSS.
>虽然浏览器尝试遵守核心规范,但在CSS方面,他们为某些事情拥有自己的CSS属性,特别是在支持旧版浏览器时,是非常臭名昭着的.

所以,考虑到这两件事情,CSS作者有一个庞大的,多样化的浏览器基础来支持(例如,Twitter Bootstrap)将会抛出所有的CSS选择器等等,他们打算支持的所有浏览器,知道IE将忽略选择器由基于WebKit的浏览器支持,Chrome将忽略IE特定的等等.

处理渐变时,这是一个有关此技术的相关文章CSS3 Linear Gradient Syntax Breakdown.

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

> Chrome 27 was the last version to support WebKit.

因此,如果您看到“-webkit-overflow-scrolling”的CSS警告,如果您使用的是Chrome 28或更高版本,那么我可以看到为什么您会看到WebKit相关的CSS警告. (我没有使用Chrome的前后WebKit版本进行回归测试,100%确认了这一点,但是我的Geek Intuition™有90%的信心,这是正在发生的).

再次,我不用担心,只要你看到的是你期待的.确保使用基于WebKit的浏览器进行测试,以确保WebKit针对性代码也按预期工作.

猜你在找的CSS相关文章