其实谷歌浏览器提取css样式的问题并不复杂，但是又很多的朋友都不太了解谷歌浏览器提取css样式在哪，因此呢，今天小编就来为大家分享谷歌浏览器提取css样式的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

本文目录

1. 谷歌浏览器不支持CSS设置小于12px的文字怎么办
2. 急!怎么用js提取出span标签内style里的属性值
3. 外部CSS样式表在火狐浏览器里不起作用
4. 火狐不显示css样式,放360浏览器正常显示,代码如下
5. 为什么我的浏览器不能显示css样式

一、谷歌浏览器不支持CSS设置小于12px的文字怎么办

在最新版的谷歌里。已经不在支持这个属性啦

谷歌浏览器Chrome是Webkit的内核，有一个-webkit-text-size-adjust的私有 CSS属性，通过它即

可实现字体大小不随终端设备或浏览器影响。

-webkit-text-size-adjust:none;

如何让谷歌浏览器支持小于12px的字体

经常与网页打交道的攻城师，应该都知道。谷歌不支持小于12px的字体。

比如。修改浏览器配置。修改浏览器语言。

但作为一个WEB，我们无法修改用户的浏览器。这时候就出现了

html{-webkit-text-size-adjust:none;}

但是，在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。

而我们用到的就是transform:scale()

<p>我是一个小于12PX的字体</p>

放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px

-webkit-transform:scale(0.8);//0.8位缩放倍数，具体自己根据实际需求修改

p{font-size:10px;-webkit-transform:scale(0.8);}

但是，如果，这个属性会把真个p的属性都缩放。如果我有背景呢？我有边框呢？都会被缩小！

<p><span>我是一个小于12PX的字体</span></p>

span{-webkit-transform:scale(0.8);}

但是你会惊讶发现，不可以。实际上，是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高

的元素，而span是行内元素，不可以

span{-webkit-transform:scale(0.8); display:inline-block}

为什么定义 display:inline-block而不是 display:block？

转为block就独占一行啦。如果我后面紧追怎么办元素。所以转换为inline-block

放在谷歌浏览器里，运行一下会发现支持字体变小啦~~放心啦。。。

但是你会发现。会存在一定的边距。貌似margin或者padding的间距。这就是缩放存在问题。原来的位

所以，要对应修改margin了。定义为负的。。

NO，我们还需要去兼容opera！！！

为什么？opera现在最新版也是webkit内核啦~~~苦逼的工程师呀~

本来就是10px的字体了。然后在缩放，不敢想象了！

span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}

放心opera还是支持他的私有前缀的。

<title>无标题文档</title>

span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}

<p><span>我是一个小于12PX的字体</span></p>

为了方便，我们最好定义为一个类，方便我们每次调用

<title>无标题文档</title>

.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}

<p><span class="shrink">我是一个小于12PX的字体</span></p>

二、急!怎么用js提取出span标签内style里的属性值

内嵌样式：是写在Tag里面的，内嵌样式只对所有的Tag有效。

内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。

外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])

currentStyle是IE浏览器的一个属性，返回的是CSS样式对象

element.style//只能获取内嵌样式

element.currentStyle//IE浏览器获取非内嵌样式

window.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式

document.defaultView.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式

注：Gecko 2.0(Firefox 4/ Thunderbird 3.3/ SeaMonkey 2.1)之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），现在可以省略这个参数。

下面的html中包含两种css样式，id为tag的div是内嵌样式，而id为test的div样式为内部样式.

<metaname="Generator"content="EditPlus®">

<metaname="Author"content="YvetteLau">

<metaname="Keywords"content="关键字">

<metaname="Description"content="描述">

<title>Document</title>

<divid="test"></div>

<divid="tag"style="width:500px;height:300px;background-color:pink;"></div>

</html>

<scripttype="text/javascript">

<scripttype="text/javascript">

vartest=document.getElementById("test");

vartag=document.getElementById("tag");

//CSS样式对象:CSS2Properties{},CSSStyleDeclaration

console.log(test.style);//火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{}

console.log(tag.style);//返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}

//element.style获取的是内嵌式的style，如果不是内嵌式，则是一个空对象

console.log(tag.style.backgroundColor);//pink

console.log(tag.style['background-color']);//pink

//获取类似background-color,border-radius,padding-left类似样式的两种写法啊

console.log(test.currentStyle)//火狐和谷歌为Undefined,IE返回CSS对象

console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……}，火狐返回CSS2Properties{……}

console.log(window.getComputedStyle(test))

//效果同上,但是在Gecko2.0(Firefox4/Thunderbird3.3/SeaMonkey2.1)之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

console.log(test.currentStyle.width);//500px(IE)

console.log(window.getComputedStyle(test).width);//500px;

console.log(window.getComputedStyle(test)['width']);//500px;

//document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]

三、外部CSS样式表在火狐浏览器里不起作用

1、设置的样式被强替换，覆盖失效。要验证该问题可以在元素上右击，然后选择“查看元素”即可进入调试界面，在“样式”面板下会显示作用域的css属性及其值，未生效的样式代码也会以删除线标注出来；

2、浏览器设置问题，关闭了页面样式。开启路径：菜单->查看->页面样式，选择设置为“基本页面样式”即可。

四、火狐不显示css样式,放360浏览器正常显示,代码如下

1、尊敬的用户，您好！很高兴为您答疑。

2、因为火狐不支持xml中CSS的ID选择器，故您无法通过ID值进行样式定义，class和id的用途是不一样的，不带#时，既是class，是对html标记选择器的一种扩展，CLASS可以给多个标记反复利用。而ID的目的在于单独进行样式定义，一般多在Javascript改变样式中使用，来动态改变外观。

3、希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。

五、为什么我的浏览器不能显示css样式

1.为什么在不同的浏览器显示效果不一样？

因为不同浏览器对于css样式表的解析不一样，所以导致样式乃至层布局发生变化。例如，ff中设置padding属性时，div会相应增加height和width，而ie的解析是不会的，再例如ff对盒模型的解析和ie相差两个象素。

2.设计时要做到所有浏览器都兼容吗？

我的答案是即使能做到也没有必要去做，科技是在进步的，用户总是在推陈出新的使用这新版本的浏览器，根据“设计诉说”的站点统计小样本结果显示，6225个访问者中有72.1%使用IE6.0；12.7%使用IE7.0；7.9%在使用FF2.0，剩余的不同版本的浏览器占的百分比都不到1%所以我认为只要做到IE6 FF2.0以及新出的IE7.0兼容即可，顶多向下兼容一下IE5.5，完全没有必要为了那些个小数点费劲脑子。如果有必要可以另外设计css文件，然后通过js判断浏览器版本进行选择相应的文件。

这个是个好问题，当你弄明白这个，我想应该可以很自如的运用一些兼容样式表的技巧了。在正常的IE中，如果你在css中重复定义一个属性时，浏览器解析的是后面的属性，举个例子

重复定义盒模型的高度属性，越后面优先级越高，所以浏览器解析出的结果就是高度为300px。

最常用的一种方法了，也是屡试不爽的——“!important”，这个字段是用来提高优先级的，而IE6.0对于找个字段是无法识别的，于是FF与IE6.0就可以分开解析了。例如，在IE下显示red，FF下显示blue，只需要这么写

background-color:blue!important;

“!important”FF可以识别，blue那行提高优先级，因此在FF中blue优先级高于red，显示为蓝色

切记，上下两句的位置一定不能颠倒。问为什么的再好好看看上两个问题，再不明白就面壁去....

其实我认为做到IE6.0与FF2.0已经足够，5.5的兼容用“/**/” 5.0的兼容用“>”，具体我就不说了，说实在我也不大懂，大家可以去google一下

这个问题我也要问大家，大家有答案的告诉我，因为新版的IE7.0对于“!important”具有识别能力，可是对于盒以及padding等的解析却和 IE6.0差不多，于是乎，完全兼容了IE6.0和FF2.0的就似乎兼容不了IE7.0，捣腾了好久，还是不知道怎么办。请大家帮帮忙！

7.css对浏览器兼容应做到完全一致吗？

个人认为在满足可读性的原则和不影响整体布局的前提下，界面有些许的位置不同是可以允许的，要在不同浏览器下做到一模一样，那真是太费劲了。

恩，先这些吧，欢迎大家指正和补充～

OK，本文到此结束，希望对大家有所帮助。