大家好，关于兼容谷歌浏览器css代码很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于兼容谷歌浏览器css代码怎么设置的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

本文目录

1. html css的代码如何让它兼容到ie9浏览器,最简单的方法
2. 用CSS怎么写浏览器兼容的代码
3. 如何才能编写出兼容各浏览器的CSS

一、html css的代码如何让它兼容到ie9浏览器,最简单的方法

用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10中的各种兼容性问题。

在网站前端写代码的过程中，很多时间IE各个版本的兼容问题很难整。现在百度与谷歌都有了一行解决这种兼容性的代码了。如下面的。

百度也应用了这种方案去解决IE的兼容问题

2<htmlxmlns=;

4<metahttp-equiv=Content-Typecontent=“text/html;charset=utf-8″>

5<metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7>

6<title>百度一下，你就知道</title>

7<script>varwpo={start:newDate*1,pid:109,page:‘superpage’}</script>

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码！

这句话的意思是强制使用IE7模式来解析网页代码！

8<metahttp-equiv=“X-UA-Compatible”content=“IE=8″>

2. Google Chrome Frame也可以让IE用上Chrome的引擎:

9<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>

10<metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode–>

12<metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode–>

4.强制IE8使用IE6或IE5模式来解析

13<metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode–>

14<metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode–>

5.如果一个特定版本的IE支持所要求的兼容性模式多于一种，如：

15<metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>

二.在网网站服务器上指定预设兼容性模式来解决这个办法

当然如果服务器是自己的话，可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入，下列的 web.config文件使Microsoft Internet Information Services(IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案，例如google的

ie7– js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式（推荐）

17<script src=”(beta)/IE7.js” type=”text/javascript”></script>

20<script src=”(beta)/IE8.js” type=”text/javascript”></script>

使IE5,IE6,IE7,IE8兼容到IE9模式

23<script src=”(beta4)/IE9.js”></script>

二、用CSS怎么写浏览器兼容的代码

1、CSShack的目的就是使你的CSS代码兼容不同的浏览器。我们也可以反过来利用CSShack为不同版本的浏览器定制编写不同的CSS效果。

2、没什么捷径走，兼容性是靠经验得来的。前期建议买本css书系统学习一下，做的时候每写一句css就用不同浏览器测试一下，哪个不兼容就立刻修改css。遵守规范，谨记用合适的标签做适合的事，最少的标签做最多的事。

3、.POSITION：absolute；这个就是绝对定位。

4、简单的说，CSShack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSShack为不同的版本浏览器定制编写不同的CSS效果。

5、要使CSS适应所有的浏览器就必须使用JS来判断浏览器和分辨率才能实现所有的浏览器兼容。所有的效果才不会有所变化。

三、如何才能编写出兼容各浏览器的CSS

编写出兼容各浏览器的CSS的技巧和方法：

1. Div居中问题：div设置 margin-left, margin-right为 auto时已经居中，IE不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

2.链接(a标签)的边框与背景a链接加边框和背景色，需设置 display: block,同时设置 float: left保证不换行。参照 menubar,给 a和 menubar设置高度是为了避免底边显示错位,若不设 height,可以在 menubar中插入一个空格。

3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code:<style type="text/css"><!-- a:link{} a:visited{} a:hover{} a:active{}--></style>

4.游标手指cursorcursor: pointer可以同时在 IE FF中显示游标手指状， hand仅 IE可以

5.UL的padding与marginul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

6. FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

7. BOX模型解释不一致问题在FF和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;#box{ width:600px;//for ie6.0- w\idth:500px;//for ff+ie6.0}#box{ width:600px!important//for ff width:600px;//for ff+ie6.0 width/**/:500px;//for ie6.0-}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段-!important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px!important;/*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px;/* Style for IE*/}值得注意的是，一定要将xxxx!important这句放置在另一句之上，上面已经提过

10.IE,FF的默认值问题或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的IE6可以这样定义:{ height:auto!important; height:200px; min-height:200px;}

12.FireFox下如何使连续长字段自动换行众所周知IE中直接使用 word-wrap:break-word就可以了, FF中我们使用JS插入的方法来解决<style type="text/css"><!-- div{width:300px;word-wrap:break-word;border:1px solid red;}--></style><div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div><scrīpt type="text/javascrīpt">/*<![CDATA[*/ function toBreakWord(el, intLen){varōbj=document.getElementById(el);var strContent=obj.innerHTML;var strTemp="";while(strContent.length>intLen){strTemp+=strContent.substr(0,intLen)+"";strContent=strContent.substr(intLen,strContent.length);}strTemp+=""+strContent;obj.innerHTML=strTemp;} if(document.getElementById&&!document.all)toBreakWord("ff", 37);/* ]]>*/</scrīpt>

13.为什么IE6下容器的宽度和FF解释不同呢<xml version="1.0" encoding="gb2312"><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"""><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><style type="text/css"><!-- div{cursor:pointer;width:200px;height:200px;border:10px solid red}--></style><divōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode

IE6,IE7,FFIE7.0出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.

第一种，是CSS HACK的方法height:20px;/*For Firefox*/*height:25px;/*For IE7& IE6*/_height:20px;/*For IE6*/注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。#example{ color:#333;}/* Moz*/* html#example{ color:#666;}/* IE6*/*+html#example{ color:#999;}/* IE7*/

<!--其他浏览器--><link rel="stylesheet" type="text/css" href="css.css"/><!--[if IE 7]><!--适合于IE7--><link rel="stylesheet" type="text/css" href="ie7.css"/><![endif]--><!--[if lte IE 6]><!--适合于IE6及一下--><link rel="stylesheet" type="text/css" href="ie.css"/><![endif]-->

第三种，css filter的办法，以下为经典从国外网站翻译过来的。.新建一个css样式如下：#item{width: 200px;height: 200px;background: red;}新建一个div,并使用前面定义的css的样式：<div id="item">some text here</div>在body表现这里加入lang属性,中文为zh：<body>现在对div元素再定义一个样式：*:lang(en)#item{background:green!important;}这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：#item:empty{background: green!important}:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。对IE6和FF的兼容可以考虑以前的!important比较常用。

如果你还想了解更多这方面的信息，记得收藏关注本站。