在网站建设中css的编写需要注意那些问题

日期:2015-08-13 17:28    阅读:


DIV+CSS规划IE6、IE7、FF 兼容性 

DIV+CSS页面规划这是一种趋势,我也开端习惯这股趋势了,不过在运用DIV+CSS网站规划的时分,应当留意css款式兼容不相同浏览器疑问,特别是对彻底运用DIV+CSS规划的页面,就应当更留意IE6 IE7 FF对CSS款式的兼容.
 
啥是浏览器兼容:当咱们运用不相同的浏览器(Firefox IE7 IE6)拜访同一个网站,或许页面的时分,会呈现一些不兼容的疑问,在这种浏览器下显现正常,在另一种下就乱了,咱们在编写CSS的时分会很动火,刚修正了这个浏览器的疑问,成果别的一个浏览器却出了新疑问。
 
一、!important (功用有限) 
跟着IE7对!important的支撑, !important 办法如今只关于IE6的兼容.(留意写法.记得该声明方位需求提前.) 
例如: 
 
#example { 
width: 100px !important; /* IE7+FF */ 
width: 103px; /* IE6 */ 
 
二、CSS HACK的办法
 
首要需求知道的是: 
 
一切浏览器 通用 height: 100px; 
IE6 专用 _height: 100px; 
IE7 专用 *+height: 100px; 
IE6、IE7 共用 *height: 100px; 
IE7、FF 共用 height: 100px !important; 
 
例如: 
 
#example { height:100px; } /* FF */ 
 
* html #example { height:200px; } /* IE6 */ 
 
*+html #example { height:300px; } /* IE7 */ 
 
下面的这种办法对比简略 
 
举几个比如: 
 
1、IE6 - IE7+FF 
 
#example { 
height:100px; /* FF+IE7 */ 
_height:200px; /* IE6 */ 
本来这个用上面说的榜首种办法也能够济南网站建设
#example { 
height:100px !important; /* FF+IE7 */ 
height:200px; /* IE6 */ 
 
2、IE6+IE7 - FF 
 
#example { 
height:100px; /* FF */ 
*height:200px; /* IE6+IE7 */ 
 
3、IE6+FF - IE7 
 
#example { 
height:100px; /* IE6+FF */ 
*+height:200px; /* IE7 */ 
 
4、IE6 IE7 FF 各不相同 
 
#example { 
height:100px; /* FF */ 
_height:200px; /* IE6 */ 
*+height:300px; /* IE7 */ 
或: 
#example { 
height:100px; /* FF */ 
*height:300px; /* IE7 */ 
_height:200px; /* IE6 */ 
 
需求留意的是,代码的次序必定不能颠倒了,要不又前功尽弃了。因为浏览器在解说程序的时分,假如重名的话,会用后边的掩盖前面的,就象给变量赋值一个道理,所以咱们把通用的放前面,越专用的越放后边 
 
解说一下4的代码: 
 
读代码的时分,榜首行height:100px; 咱们都通用,IE6 IE7 FF 都显现100px 
到了第二行*height:300px; FF不认识这个特点,IE6 IE7都认,所以FF还显现100px,而IE6 IE7把榜首行得到的height特点给掩盖了,都显现300px 
到了第三行_height:200px;只需IE6认识,所以IE6就又掩盖了在第二行得到的height,最终显现200px 
这么,三个浏览器都有自个的height特点了.
 
 
*+html 对IE7的兼容 有必要确保HTML顶部有如下声明: 
 
 
 
三、运用IE专用的条件注释 
 
 
IE的if条件Hack 
 
1. 除IE外都可辨认  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11. 注:gt = Great Then 大于 
> = > 大于号 
lt = Less Then 小于 
< = < 小于号 
gte = Great Then or Equal 大于或等于 
lte = Less Then or Equal 小于或等于 
 
四、css filter的办法
 
新建一个css款式如下: 
 
#item { 
 
width: 200px; 
 
height: 200px; 
 
background: red; 
 
 
新建一个div,并运用前面界说的css的款式: 
 
some text here
 
在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各版别以外的浏览器上。 
 
 
五、FLOAT闭合(clearing float) 
 
  页面在某些浏览器上显现错位许多时分都是因为运用了float起浮而没有真实闭合,这也是div无法自习惯高度的一个缘由。假如父div没有设float而其子div却设了float的话,父div无法包住全部子DIV,这种状况通常呈如今一个父DIV下包括多个子DIV。处理办法: 
 
1、给父DIV也设上float
 
2、在一切子DIV后新加一个空DIV(不引荐,有些浏览器能够看见空DIV发生的空地) 
 
比方: 
 
.parent{width:100px;} 
.son1{float:left;width:20px;} 
.son2{float:left;width:80px;} 
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;} 
 
 
 
 
 
 
 
3、万能 float 闭合 
 
将以下代码参加Global CSS 中,给需求闭合的div加上 class=”clearfix” 即可 
代码: 
 
 
:after(伪目标),设置在目标后发作的内容,通常和content合作运用,IE不支撑此伪目标,非Ie 浏览器支撑,所以并不影响到IE/WIN浏览器。这种的最费事。 
 
4、overflow:auto
 
只需在父DIV的CSS中加上overflow:auto就搞定。 
 
举例: 
 
.parent{width:100px;overflow:auto} 
.son1{float:left;width:20px;} 
.son2{float:left;width:80px;} 
 
 
 
 
 
 
作者原话:原理是,外围元素之所以不能极好的延伸,疑问出在了overflow上,因为overflow不可见(见W3C的解说)。如今只需将给外围元素添 加一个“overflow:auto”,就能够处理疑问,成果是除了IE,真的能够处理。下来就要处理IE的疑问了,再加上“_height:1%”,这个疑问就彻底处理了。 
 
我试了一下,本来不加"_height:1%“在IE下也行,藏着吧。 
 
六、需求留意的一些兼容细节 
 
1, FF下给 div 设置 padding 后会致使 width 和 height 添加(DIV的实践宽度=DIV宽+Padding), 但IE不会. 
 
处理办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有符号" * "号。 
 
2, 页面居中疑问. 
 
body {TEXT-ALIGN: center;} 在IE下足够了,但FF下失效。 
 
处理办法:加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; " 
 
3, 有的时分在IE6上看见一些古怪的空地,可咱们高度分明设好了呀。 
 
处理办法:试试在有空地的DIV上加上"font-size:0px;" 
 
4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 
 
5, 起浮IE6发生的双倍间隔 
 
#box{ float:left; 
width:100px; 
margin:0 0 0 100px; 
这种状况之下IE6会发生200px的间隔 
 
处理办法:加上display:inline,使起浮疏忽 
 
这儿细说一下block,inline两个元素,Block元素的特点是:总是在新行上开端,高度,宽度,行高,边距都能够操控(块元素);Inline元素的特点是:和别的元素在同一行上,…不可操控(内嵌元素); 
#box{ display:block; //能够为内嵌元素模拟为块元素 display:inline; //完成同一行摆放的的效果 
 
6 页面的最小宽度 
 
min-width是个十分便利的CSS指令,它能够指定元素最小也不能小于某个宽度,这么就能确保排版一向正确。但IE不认得min-这个界说,但实践上它把正常的width和height当作有min的状况来使。这么疑问就大了,假如只用宽度和高度,正常的浏览器里 这两个值就不会变,假如只用min-width和min-height的话,IE下面底子等于没有设置宽度和高度。比方要设置布景图片,这个宽度是对比重 要的。 
 
处理办法:为了让这一指令在IE上也能用,能够把一个
放到标签下,然后为div指定一个类: 
然后CSS这么规划: 
#container{ 
min-width: 600px; 
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” ); 
榜首个min-width是正常的;但第2行的width运用了Javascript,这只需IE才认得,这也会让你的HTML文档不太规范。它实践上经过Javascript的判别来完成最小宽度。 
 
7、UL和FORM标签的padding与margin 
 
ul标签在FF中默许是有padding值的,而在IE中只需margin默许有值。FORM标签在IE中,将会主动margin一些边距,而在FF中margin则是0; 
 
处理办法:css中首要都运用这么的款式ul,form{margin:0;padding:0;}.
 
8 ,DIV起浮IE文本发生3象素的bug 
 
左面目标起浮,右边选用外补丁的左面距来定位,右边目标内的文本会离左面有3px的距离. 
#box{ 
float:left; 
width:800px;} 
#left{ 
float:left; 
width:50%;} 
#right{ 
width:50%; 
*html #left{ 
margin-right:-3px; 
//这句是要害 
HTML代码 
 
 
 
 
关于上面这段代码,下面说一下我的了解: 
 
榜首、只需right界说了width特点,在FF下肯定就会两行显现 
第二、两个width都界说为百分比的话,就算都为100%在IE下也会一行显现。所以上面那句所谓“这句是要害”底子没用,不加也在一行,除非你width界说的是数值才用得上。 
 
所以说上面这段代码本来用途不大,至少在FF下不可。本来只需只界说left的width就行了,right不界说width就不论在IE仍是FF下都能成功,但这么的话父DIV BOX并没有真实的包括LEFT和RIGHT两子DIV,能够用我上面说的第5种办法处理。最简略的办法就是在RIGHT中加上float:left就OK了
 
 
9,截字省略号 
 
.hh { -o-text-overflow:ellipsis; 
text-overflow:ellipsis; 
white-space: 
nowrapoverflow:hidden; 
这个是在越出长度后会自行的截掉多出有些的文字,并以省略号结尾。技能是好技能,许多人都喜爱乱用,但留意Firefox并不支撑 
 
 
 
 
CSS窍门
 
1.div的笔直居中疑问 vertical-align:middle; 将行距添加到和全部DIV相同高 line-height:200px; 然后刺进文字,就笔直居中了。缺陷是要操控内容不要换行  
 
2. margin加倍的疑问     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。处理方案是在这个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指定一个类, 然后CSS这么规划: #container{ min-width: 600px; width:e-xpression(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; //这句是要害}
 
 
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私有,特点用zoom:1;能够做到,这么就到达了兼容。 例如某一个wrapper如下界说: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
 
③关于排版,咱们用得最多的css描绘也许就是float:left.有的时分咱们需求在n 栏的float 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加上 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; //将目标作为块元素级的表格显现}  
 
11.高度不习惯 高度不习惯是当内层目标的高度发作变化时外层高度不能主动进行调理,特别是当内层目标运用margin 或paddign 时。 例: #box {background-color:#eee; }     #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }    
   

p目标中的内容

   
    处理办法:在P目标上下各加2个空的div目标CSS代码:.1{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;
 
14.web规范中界说id与class有啥区别吗一.web规范中是不容许重复ID的,比方 div id="aa" 不容许重复2次,而class 界说的是类,理论上能够无限重复, 这么需求屡次引证的界说便能够运用他. 二.特点的优先级疑问 ID 的优先级要高于class,看上面的比如三.便利JS等客户端脚本,假如在页面中要对某个目标进行脚本操作,那么能够给他界说一个ID,不然只能运用遍历页面元素加上指定特定特点来找到它,这是相对浪费时间资源,远远不如一个ID来得简略.
 
15. LI中内容超过长度后以省略号显现的办法 此办法适用与IE与OP浏览器
 
16.为啥web规范中IE无法设置滚动条色彩了 处理办法是将body换成html
 
17.为啥无法界说1px摆布高度的容器 IE6下这个疑问是因为默许的行高形成的,处理的办法也有许多,例如 verflow:hidden | zoom:0.08 | line-height:1px
 
18.如何才能让层显如今FLASH之上呢 处理的办法是给FLASH设置通明
 
19.如何使一个层笔直居中于浏览器中这儿咱们运用百分比肯定定位,与外补丁负值的办法,负值的巨细为其自身宽度高度除以二
 
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:
 
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*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得留意的是,必定要将xxxx !important 这句放置在另一句之上,上面现已提过

分享到: 微信 更多

Copyright © 2010-2014 吉峰网络 保留公司所有权