您所在的位置: 首页 > 新闻动态 > 网站建设

网站建设 签约客户 公司新闻 行业新闻 SEO优化 域名邮箱 九曲学堂 客户评价 解决方案 公司活动

网页设计之CSS兼容性问题

发表日期:2015/03/28 文章编辑:浏览次数:813

网页设计之CSS兼容性问题

我们现在在网站建设的时候CSS的应用已经是越来越深受设计者们的青睐;但CSS对阅读器的兼容性有时也让人很头疼,或许当你理解当中的技术跟原理,就会觉得也不是难事,从网上搜集了IE7,6与Fireofx的兼容性处置技术并整理了一下。关于web2.0的过度,请尽量用xhtml格式写代码,并且DOCTYPE 影响 CSS 处置,做为W3C的规范,一定要加 DOCTYPE声明。

CSS技术

1.div的垂直居中Issue(问题)

vertical-align:middle; 将行距增长到和全部DIV一样高 line-height:200px; 接着拔出文字,就垂直居中了。缺陷是要控制内容不必换行

2. margin加倍的Issue(问题)

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。处理方案是在这个div外面加上display:inline;

例如:

<#div id=”imfloat”>

对应的css为

#imfloat{

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与宽度和高度的Issue(问题)

IE不认得min-这个定义,但实践上它把正常的width和height当做有min的状况来使。这样Issue(问题)就大了,假如只用宽度和高度,正常的阅读器里这两个值就不会变,假如只用min-width和min-height的话,IE上面基本等于没有设置宽度和高度。

比方要设置背景图片,这个宽度是比拟紧要的。要处理这个Issue(问题),能够这样:

#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象素的bug

 

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

 

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

 

</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,所以我们应该这样解决

 

<div id=”page”>

<div id=”bg” style=”float:left;width:100%”>

<div id=”left”></div>

<div id=”center”></div>

<div id=”right”></div>

</div>

</div>

 

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

 

④万能float 闭合(十分紧要!)

 

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码参加Global CSS 中,给需求闭合的div加上 class="clearfix" 便可,屡试不爽.

 

/* 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; //将对象做为块元素级的表格显示} |||

 

9.高度不顺应

 

高度不顺应是当内层对象的高度出现变化时外层高度不能主动实行调理,特殊是当内层对象运用margin 或paddign 时。

 

例:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<div id="box">

<p>p对象中的内容</p>

</div>

 

处理技术:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或许为DIV加上border属性。

 

10 .IE6下为什么图片下有空隙发生

 

处理这个BUG的技术也有很多,能够是改动html的排版,或许设置img 为display:block 或许设置vertical-align 属性为vertical-align:top

 

bottom  middle  text-bottom 都能够处理.

 

11.如何对齐文本与文本输出框

 

加上 vertical-align:middle;

 

<style type="text/css">

<!--

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

-->

</style> |||

 

12.web规范中定义id与class有什么区别吗

 

一.web规范中是不允许反复ID的,比方 div id="aa" 不允许反复2次,而class 定义的是类,实际上能够无穷反复, 这样需求屡次援用的定义就可以以运用他.

 

二.属性的优先级Issue(问题)

 

ID 的优先级要高于class,看下面的例子

 

三.方便JS等客户端脚本,假如在页面中要对某个对象实行脚本操作,那么能够给他定义一个ID,不然只能应用遍历页面元素加上指定特定属性来找到它,这是绝对糜费时刻资源,远远不如一个ID来得容易.

13. LI中内容超越长度后以省略号显示的技术

 

此技术适用与IE与OP阅读器

 

<style type="text/css">

<!--

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

-->

</style>

 

14.为什么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">

<!--

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

-->

</style>

15.为什么没法定义1px左右高度的容器

 

IE6下这个Issue(问题)是由于默许的行高形成的,处理的技术也有很多,例如:overflow:hidden   zoom:0.08   line-height:1px

 

16.怎样样才干让层显示在FLASH之上呢

 

处理的方法是给FLASH设置透亮

 

|||

17.怎样使一个层垂直居中于阅读器中

 

这里我们运用百分比相对定位,与外补丁负值的技术,负值的大小为其本身宽度高度除以二

 

  <style type="text/css">

<!--

div {

position:absolute;

top:50%;

lef:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style> 

 

FF与IE

 

1. Div居中Issue(问题)

 

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款式就不显示的Issue(问题)

 

被单击拜访过的超链接款式不在具有hover和active了,很多人应该都遇到过这个Issue(问题),处理技术是改动CSS属性的陈列顺序: L-V-H-A

 

Code:

 

 

<style type="text/css">

<!--

a:link {}

a:visited {}

a:hover {}

a:active {}

-->

</style>

 

4. 游标手指cursor

 

cursor: pointer 能够一同在 IE FF 中显示游标手指状, hand 仅 IE 能够

 

5.UL的padding与margin

 

ul标签在FF中默许是有padding值的,而在IE中唯有margin默许有值,因此先定义 ul{margin:0;padding:0;}就能处理大局部Issue(问题)

 

6. FORM标签

 

这个标签在IE中,将会主动margin少许边距,而在FF中margin则是0,因而,假如想显示相同,因此最佳在css中指定margin和 padding,针对下面两个Issue(问题),我的css中普通首先都运用这样的款式ul,form{margin:0;padding:0;}给定义死了,因此前面就不会为这个头疼了.

 

7. BOX模型说明不相同Issue(问题)

 

在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

 

假如真实没有方法处理少许细节Issue(问题),能够用这个技术.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的默许值Issue(问题)

 

或许你不断在埋怨为什么要专门为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拔出

的技术来处理

aaaaaaaaaaaaaaaaaaaaaaaaaaaa</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);

/* ]]> */

 

问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考相关资料。

 

IE6,IE7,FF

 

IE7.0出来了,对CSS的支持又有新问题。浏览器多了,网Bpx; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

 

注意顺序。

 

这样也属于CSS HACK,不过没有上面这样简洁。

 

#example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

 

第二种,是使用IE专用的条件注释

 

第三种,css filter的办法,以下为经典从国外网站翻译过来的。.

 

新建一个css样式如下:

 

#item {

width: 200px;

height: 200px;

background: red;

}

 

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

 

some text here</div>

 

在body表现这里加入lang属性,中文为zh:

 

现在对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 个人比较喜欢用第一种,简洁,兼容性比较好

本文为九曲网络原创文章,如想转载,请注明原文网址摘自于 http://9qu.cn/newsshow/205.htm ,注明出处;否则,禁止转载;谢谢配合!

上一篇:LED照明网站建设及网站改版设计方案 下一篇:用户体验网站设计引发的思考