大家好，如果您还对谷歌浏览器style调试不太了解，没有关系，今天就由本站为大家分享谷歌浏览器style调试的知识，包括谷歌浏览器调试页面的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

本文目录

1. CSS如何调试
2. 如何在style标签内写针对浏览器的样式
3. 谷歌浏览器对select的option里的style属性设置如何兼容
4. 浏览器提示style为空或不是对象怎么解决
5. 浏览器兼容性问题,火狐可以,谷歌不可以
6. 用js 改 style.top 或style.bottom 在火狐浏览器下都不起作用

一、CSS如何调试

1.我们以谷歌浏览器为例，来讲讲怎么调试CSS。先打开谷歌浏览器，看截图里的红色箭头，点击“工具”，点击“开发者工具”，就打开调试工具了，也可以按下快捷键F12来打开调试工具；

3.我们就以百度的首页为例，看看调试效果。看截图，点击那个“抓取元素”的按钮，来获取要审查的元素；

4.看截图，出现下面的界面后，点击“style”，单击那个对勾，就可以看到效果了；

5.我去掉一些样式之后，就出现了下面的效果，看截图；

二、如何在style标签内写针对浏览器的样式

style标签用于为 HTML文档定义样式信息。

在 style中，您可以规定在浏览器中如何呈现 HTML文档。

type属性是必需的，定义 style元素的内容。唯一可能的值是 text/css。

HTML style标签实例：html head style type= text/css h1{color:red}p{color:blue}/style/head body h1 Header 1/h1 p A paragraph./p/body/html

type： text/css：规定样式表的 MIME类型。

html style标签的使用方法详解：

/style标签对中书写各种标签的样式,可以是body也可以是h1,即将行内样式全写在一块儿

比如10个标签都是同一个class的话，如果在行内样式中就需要写10条

现在都是结构(html)、样式(css)、行为(js)相分离的设计模式p id= xxx=== style#xxx{}/style p>

style标签在css样式表中按其所在位置分三种：

1.内嵌样式表是写在使用它的标签(Tag)内的，例如要在 p标签中使用，

其语法为：p style font-size:20pt这段文字使用了内嵌样式表，更改了字体大小为20/p

2.内部样式表不同于内嵌样式表，其是写在html网页的 head/head标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要注意，自己想在那个标签内使用这个样式表，再定义的时候也要写清楚，否则会造成整个页面的混乱。例如：html head p.mylayout style type= text/css{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center;}/style/head body p>

可以看到，在定义内部样式表的时候， style前面声明的时候应该首先声明在哪个标签里使用这个样式表，如果并不想在该网页所有的此标签中都使用这个样式表则在声明的标签后面加上自己定义的一个样式表名称，例如上面的p.mylayout，意为只能在该网页的 p标签中使用此样式表，在要使用这个样式表的 p标签中声明，声明方式为标签自定义样式表名称

利用样式表选择，你可以用同样的HTML标签构成不同的样式。比如说，你希望段落 p有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：p.right{text-align:right}p.center{text-align:center}

其中right和center就是两个样式表。然后你就可以引用这两个样式表，示例代码如下：p>

也可以不用HTML标签，直接用“.”加上样式表名称。示例代码如下：.center{text-align: center}

这种通用的样式表名称就没有标签的局限性，可以用于不同的标签。比如：h1 class= center这个标题居中显示。/h1 p class= center这个段落居中显示。/p

外部样式表就是将样式表的内容单独写到一个notepad中，并保存为后缀为.css的文件，在你写的想要调用的网页中加上如下的代码(当然还是加到 head/head之间)：link href=你css文件所在的文件夹 rel= stylesheet type= text/css

三、谷歌浏览器对select的option里的style属性设置如何兼容

基本上浏览器兼容问题主要是JavaScript和CSS问题。

而在这两个裏面，JavaScript尤其严重。一个不小心，直接导致该功能块无法在其他浏览器上运行，CSS次之，写不好能使你的浏览器布局大乱~

其实解决浏览器兼容问题一直是很多做Web开发同学的头疼问题~~

基本上想兼容所有的浏览器不是不可能，但工程量要太大~~（开发的时候，能使你的Web支援当前主流的浏览器就可以，我开发的很多系统都是保证在IE7、8、火狐、Safari下正常就行，IE6基本不管~）

向完美支持就要写各浏览器版本对应的CSS及JavaScript。

在Web加载时自动判断浏览器类别及版本自动加载CSS及Javascript。

至於如何判断浏览器版本，网上很多代码，你参考就行，我再次不罗嗦。只是给你提供解决方法

另：css及Javascript写的时候，最好模块化，JavaScript最好使用Jquery，支援多种浏览器，而且能避免你写太多的Javascript代码~~

四、浏览器提示style为空或不是对象怎么解决

$.browser.msie为空或不是对象问题的多种解决⽅法

'$.browser.msie'为空或不是对象，这个是jQuery错误

出现这个错误，是因为升级了jQuery版本，从1.9以前升级到1.9以后，因为$.browser.msie在1.9以后的jQuery中不存在了，所以报错。

jQuery 1.9移除了$.browser的替代⽅法

$.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的⽂档中已经声明jquery.browser及jquery.browser.version建议弃⽤，可以使⽤jquery.support来代替。

jQuery从 1.9版开始，移除了$.browser和$.browser.version，取⽽代之的是$.support。在更新的 2.0版本中，将不再⽀持 IE 6/7/8。以后，如果⽤户需要⽀持IE 6/7/8，只能使⽤ jQuery 1.9或者jQuery 1.10.1等。如果要全⾯⽀持 IE，并混合使⽤ jQuery 1.9和 2.0，官⽅的解决⽅案是：

<script src='/jquery-1.10.1.min.js'></script>

<script src='/jquery-2.0.2.min.js'></script>

就是不要⽤$.browser.msie来判断，在⽹上找了⼀些能够直接替换的解决办法

$.browser.mozilla=/firefox/.test(navigator.userAgent.toLowerCase());

$.browser.webkit=/webkit/.test(navigator.userAgent.toLowerCase());

$.browser.opera=/opera/.test(navigator.userAgent.toLowerCase());

$.browser.msie=/msie/.test(navigator.userAgent.toLowerCase());

等号后⾯的表达式返回的就是 true/false，可以直接⽤来替换原来的$.browser.msie等。

if($.browser.msie&& 7>$.browser.version){}

if('undefined'== typeof(document.body.style.maxHeight)){}

$.support.leadingWhitespace为IE中特有的属性，因此可以利⽤$.support.leadingWhitespace来判断浏览器是否是IE6-8

if(!$.support.leadingWhitespace){}

var ieFlag=$.support.leadingWhitespace;//定义判断IE8的变量

/*后发现的判断浏览器类型通⽤类型*/⽼外写的⼀篇⽂章，在IE、Firefox、Google下亲测可⽤

var isFirefox= typeof InstallTrigger!=='undefined';

alert("isFirefox:"+isFirefox);

var isOpera=(!!window.opr&&!!opr.addons)||!!window.opera|| navigator.userAgent.indexOf(' OPR/')>= 0;

// Safari<= 9"[object HTMLElementConstructor]"

var isSafari= Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')> 0;

var isIE=/*@cc_on!@*/ false||!!document.documentMode;

var isEdge=!isIE&&!!window.StyleMedia;

var isChrome=!!window.chrome&&!!window.chrome.webstore;

var isBlink=(isChrome|| isOpera)&&!!window.CSS;

最近把⼀个项⽬的jQuery升级到最新版，发现有些页⾯报如下错误

Cannot read property'msie' of undefined

上jQuery⽹站上搜了⼀下，原因是$.browser这个api从jQuery1.9开始就正式废除，js代码⾥只要⽤到$.browser就会报这个错。具体说明参见。

楼主顺便扩展阅读了⼀下，发现jQuery 1.9把所有在之前版本⾥标记为deprecated的api都正式删除了，彻底不再向后兼容。对于升级到最新jQuery的童鞋⽽⾔，这

意味着得花费⼀些额外的时间把代码升级使⽤新的api，或者⾃⼰另外实现这些被删除的⽅法。幸运的是，jQuery团队意识到了这个break change带来的种种不

便，推出了⼀个叫jQuery Migrate插件，⽤于能够⾃动恢复那些在最新版本⾥被废弃的API。只要引⽤了这个插件，已有的js代码⽆须改动就能和最新的jQuery库⼀起正常运⾏。

下⾯是具体的解决⽅法，⾸先要下载jQuery Migrate插件，然后在引⽤jQuery js的地⽅之后加上对jQuery Migrate js⽂件的引⽤即可。

<script src=""></script>

<script src=""></script>

⽤jQuery Migrate的解决⽅法虽然简单⽆脑，但是会导致增加⼀个额外的js库。对于不喜欢增加额外js库的童鞋，请注意下⾯代码加载位置为：jQuery⽂件之

jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})()；以上就是⼩编整理的解决⽅法了，⼤家可以根据项⽬需要选择⽐较简单的。

百度文库VIP限时优惠现在开通,立享6亿+VIP内容

$.browser.msie为空或不是对象问题的多种解决方法

$.browser.msie为空或不是对象问题的多种解决⽅法

'$.browser.msie'为空或不是对象，这个是jQuery错误

出现这个错误，是因为升级了jQuery版本，从1.9以前升级到1.9以后，因为$.browser.msie在1.9以后的jQuery中不存在了，所以报错。

jQuery 1.9移除了$.browser的替代⽅法

$.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的⽂档中已经声明jquery.browser及jquery.browser.version建议弃⽤，可以使⽤jquery.support来代替。

jQuery从 1.9版开始，移除了$.browser和$.browser.version，取⽽代之的是$.support。在更新的 2.0版本中，将不再⽀持 IE 6/7/8。以后，如果⽤户需要⽀持IE 6/7/8，只能使⽤ jQuery 1.9或者jQuery 1.10.1等。如果要全⾯⽀持 IE，并混合使⽤ jQuery 1.9和 2.0，官⽅的解决⽅案是：

<script src='/jquery-1.10.1.min.js'></script>

<script src='/jquery-2.0.2.min.js'></script>

就是不要⽤$.browser.msie来判断，在⽹上找了⼀些能够直接替换的解决办法

$.browser.mozilla=/firefox/.test(navigator.userAgent.toLowerCase());

$.browser.webkit=/webkit/.test(navigator.userAgent.toLowerCase());

五、浏览器兼容性问题,火狐可以,谷歌不可以

1、火狐浏览器是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux[2]等。Firefox独立于Windows内核，使用的是非ie核心。因此设置基本不受注册表控制。

2、谷歌浏览器又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面（GUI）。但是目前网上支付还不支持谷歌浏览器。另外有些google服务被国内屏蔽，不能整合使用。

3、所以相对而言，谷歌浏览器的兼容性要差些，低于火狐浏览器。这也就是生活中我们遇到的有些操作火狐可以谷歌却不可以。

六、用js 改 style.top 或style.bottom 在火狐浏览器下都不起作用

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

看了一下您的代码，发现您针对style.top和style.bottom的用法存在问题。

1、top属性是一个条件属性，其前置条件为据对行为或者框架内定位。

2、bottom的生效优先级低于top，比如当您设置某个对象的定位值为 1 2 3 4时（对应的是上右下左），而实际对象所处空间不足这么多像素，那么就会优先对齐上和左的像素数。

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

关于本次谷歌浏览器style调试和谷歌浏览器调试页面的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。