整理常用CSS浏览器兼容问题及解决方法_CSS

CSS对涉猎器的兼容性无意偶尔让人很头疼,梗概当你认识傍边的能耐跟事理,就会感到也不是难事,从网上搜集了IE7,6与Fireofx的兼容性处置方法并整理了一下.对于web2.0的过火,请只管即便用xhtml花色写代码,而且DOCTYPE 影响 DIV CSS处置,作为W3C的标准,不一定要加 DOCTYPE声名.

CSS手段

1.div的垂直居中标题 vertical-align:middle; 将行距增多到与整个DIV一样高 line-height:200px; 然后插入翰墨，就垂直居中了。毛病是要管制内容不要换行

2. margin越发的标题设置为float的div在ie下设置装备摆设的margin会更为。这是一个ie6都具有的缝隙。用意方案是在这个div里面加上display:inline; 例如：

<#div id=”imfloat”>

响应的css为

#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

3.浮动ie发生发火的双倍隔断

#box{ float:left; width:100px; margin:0 0 0 100px; //这种状况之下IE会发作200px的隔绝距离 display:inline; //使浮动忽略}

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上匹面,高度,宽度,行高,边距均可以管束(块元素);Inline元素的特性是,与其他元素在同一行上,不成管束(内嵌元素); #box{ display:block; //可认为内嵌元素仿照为块元素 display:inline; //完成同一行排列的成果 diplay:table;

4 IE与宽度和高度的题目 IE 不认得min-这个界说，但实际上它把正常的width与height看成有min的情况来使。这样标题问题就大了，若是只用宽度和高度，畸形的涉猎器里这两个值就不会变，假设只用min-width与min-height的话，IE下面根本等于不有设置装备摆设宽度和高度。譬如要设置后盾图片，这个宽度是比较必要的。要管理这个标题问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.页面的最小宽度 min -width是个极为利便的CSS号令，它可以指定元素最小也不能小于某个宽度，这样就能包管排版不绝精确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一号令在IE上也能用，可以把一个<div> 放到 <body> 标签下，日后为div指定一个类, 尔后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是畸形的；但第2行的width使用了Javascript，这只需IE才认得，这也会让你的HTML文档不太正轨。它实际上经由过程Javascript的果决来实现最小宽度。

6.DIV浮动IE文本发作3象素的裂缝左边对象浮动，右边采用外补钉的左边距来定位，右侧对象内的文本会离左边有3px的间距.

CSS代码：

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是环节}

HTML代码：

<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>

7.IE捉迷藏的标题当div使用繁杂的时辰每一个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个地域是发现内容确切实页面。打算门径：对#layout使用line-height属性或者给#layout使用静止高和宽。页面组织只管即便容易。

8.float的div闭合;肃除浮动;自顺应高度;

① 例如：

<#div id=”floatA” > <#div id=”floatB” > <#div id=” NOTfloatC” >

这里的NOTfloatC并不渴想持续平移，而是指望往下排。(此中floatA、floatB的属性也曾设置为 float:left;) 这段代码在IE中毫无标题，问题出在FF。起因是NOTfloatC并非float标签，必需将float标签闭合。

在<#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div未必要留心地位，而且必须与两个具有float属性的div同级，之间不克不及存在嵌套关连，不然会孕育发生异常。何况将clear这种样式定义为为以下即可：

.clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能踊跃顺应，要在wrapper里面加之overflow:hidden; 当采集float的 box的时分，高度积极顺应在IE下有效，这时候辰理当触发IE的layout公有属性(万恶的IE啊！)用zoom:1;可以做到，如许就达到了兼容。例如某一个wrapper以下界说：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,咱们用得最多的css描写可能即是float:left.有的时候我们需要在n栏的float div前面做一个抗衡的后台,譬如:

<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>

比喻咱们要将page的后台设置成蓝色,以到达悉数三栏的后台色彩是蓝色的目的,然则咱们会发明跟着left center right的向下拉长,而 page竟然生活生计高度顽固,问题来了,缘由在于page不是float属性,而我们的page由于要居中,不克不及设置成float,所以咱们理应何等设计

再嵌入一个float left而宽度是100%的DIV用意之

④全能float 闭合(极为需求!) 关于 clear float 的原理可拜见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上即可,屡试不爽.

/* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */

或者如许设置装备摆设：

.hackbox{ display:table; //将对象作为块元素级的表格显示}

11.高度不顺应高度不顺应是当内层对象的高度发生变更时外层高度不能自动发展调节，特别是当内层对象使用margin 或paddign 时。

例：

#box {bac公斤round-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box"> <p>p对象中的内容</p> </div>

经管方法：在P对象高下各加2个空的div对象CSS代码：

{height:0px;overflow:hidden;}或者为DIV加之border属性。

12 .IE6下为甚么图片下有空地发生发火经管这个BUG的方法也有得多,可以是改变html的排版,或者设置装备摆设img 为display:block 或者配置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以治理.

13.若何对齐文本与文本输出框加之

vertical-align:middle;
<style type="text/css">
</style>

14.web标准中定义id与class有甚么区分吗一.web标准中是不允许几回再三ID的,譬喻 div id="aa" 不准予反复2次,而class 定义的是类,现实上可以无穷一再, 多么需要频仍援用的定义即可以使用他. 二.属性的优先级题目 ID 的优先级要高于class,看上面的例子三.利便JS等客户端剧本,假定在页面中要对某个对象发展脚本操纵,那末可以给他定义一个ID,否则只能利用遍历页面元素加之指定特定属性来找到它,这是相对勤俭时日资源,远远不如一个ID来得容易.

15. LI中内容跨越长度后以省略号显示的方法此方法合用与IE与OP浏览器

<style type="text/css">
</style>

16.为什么web规范中IE没法设置转折条颜色了办理门径是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style>

17.为甚么无法定义1px左右高度的容器 IE6下这个标题问题是因为默认的行高组成的,打算的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎样样才能让层显示在FLASH之上呢筹划的方法是给FLASH配置通明 <param name="wmode" value="transparent" />

19.怎样使一个层垂直居中于浏览器中这里咱们使用百分比相对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

<style type="text/css">
</style>

FF与IE

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">
</style>

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

5.UL的padding与margin ul标签在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*/ bac千克round: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插入
的方法来办理

<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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
</style>
<div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>

题指标差别在于容器的整体宽度有不有将边框（border）的宽度算在其内,这里IE6表明为200PX ,而FF则评释为220PX,那后果是怎么样导致的标题问题呢？人人把容器顶部的xml去掉就会创造原先标题问题出在这,顶部的申明触发了IE的qurks mode,对于qurks mode、 standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

IE6,IE7,FF IE7.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]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

第三种，css filter的方式，以下为经典从外洋站点翻译过来的。

新建一个css样式如下：

#item { width: 200px; height: 200px; bac公斤round: red; }

新建一个div,并使用前面定义的css的样式：

<div id="item">some text here</div>

在body透露表现这里插手lang属性,中文为zh：

<body lang="en">

此刻对div元素再定义一个样式：

*:lang(en) #item{ bac公斤round:green !important; }

多么做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0其实不支持,所以对这句话不会有任何浸染,于是也达到了ie6.0下异样的效果,然则很倒楣地的是,safari同样不支持此属性,所以需要退出以下css样式：

#item:empty { bac公斤round: green !important }

:empty选择器为css3的规范,尽管safari其实不赞成此规范,但是照样会选择此元素,不管是否此元素具有,当时绿色会此刻在除ie各版本之外的阅读器上。对IE6和FF的兼容可以思考之前的!important 总体比较喜欢用

13363039260

整理常用CSS浏览器兼容问题及解决方法

猜你喜欢

热门话题：

联络方式：

13363039260

插件运作原理

标题 / 关键词 / 描述

易优cms搜索结果页如何统计关键词文章数量

区断标记

首页高亮判断

客服QQ