|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
1.DOCTYPE影响CSS处置
2.FF:div设置margin-left,margin-right为auto时已居中,IE不可
3.FF:body设置text-align时,div必要设置margin:auto(次要是margin-left,margin-right)方可居中
4.FF:设置padding后,div会增添height和width,但IE不会,故必要用!important多设一个height和width
5.FF:撑持!important,IE则疏忽,可用!important为FF出格设置款式
6.div的垂直居中成绩:vertical-align:middle;将行距增添到和全部DIV一样高line-height:200px;然后拔出笔墨,就垂直居中了。弱点是要把持内容不要换行
7.cursor:pointer能够同时在IEFF中显现游标手指状,hand仅IE能够
8.FF:链接加边框和背景致,需设置display:block,同时设置float:left包管不换行。参照menubar,给a和menubar设置高度是为了不底边显现错位,若不设height,能够在menubar中拔出一个空格。
9.在mozillafirefox和IE中的BOX模子注释纷歧致招致相差2px办理办法:div{margin:30px!important;margin:28px;}注重这两个margin的按次必定不克不及写反,据阿捷的说法!important这个属性IE不克不及辨认,但其余扫瞄器能够辨认。以是在IE下实在注释成如许:div{maring:30px;margin:28px}反复界说的话依照最初一个来实行,以是不成以只写margin:XXpx!important;
11.ul标签在Mozilla中默许是有padding值的,而在IE中只要margin有值以是先界说ul{margin:0;padding:0;}就可以办理年夜部分成绩
注重事项:
1、float的div必定要闭合。
比方:(个中floatA、floatB的属性已设置为float:left;)<#divid=”floatA”></#div>
<#divid=”floatB”></#div>
<#divid=”NOTfloatC”></#div>这里的NOTfloatC其实不但愿持续平移,而是但愿往下排。
这段代码在IE中毫无成绩,成绩出在FF。缘故原由是NOTfloatC并不是float标签,必需将float标签闭合。
在<#divclass=”floatB”></#div>
<#divclass=”NOTfloatC”></#div>之间加上<#divclass=”clear”></#div>这个div必定要注重声明地位,必定要放在最得当的中央,并且必需与两个具有float属性的div同级,之间不克不及存在嵌套干系,不然会发生非常。
而且将clear这类款式界说为为以下便可:.clear{
clear:both;}别的,为了让高度能主动顺应,要在wrapper内里加上overflow:hidden;
当包括float的box的时分,高度主动顺应在IE下有效,这时候候应当触发IE的layout公有属性,用zoom:1;能够做到,如许就到达了兼容。
比方某一个wrapper以下界说:.colwrapper{
overflow:hidden;
zoom:1;
margin:5pxauto;}
2、margin更加的成绩
设置为float的div在ie下设置的margin会更加。这是一个ie6都存在的bug。
办理计划是在这个div内里加上display:inline;
比方:
<#divid=”imfloat”></#div>
响应的css为
#IamFloat{
float:left;
margin:5px;/*IE下了解为10px*/
display:inline;/*IE下再了解为5px*/}
3、关于容器的包容干系
良多时分,特别是容器内有平行结构,比方两、三个float的div时,宽度很简单呈现成绩。在IE中,外层的宽度会被内层更宽的div挤破。必定要用Photoshop大概Firework量取像素级的精度。
4、关于高度的成绩
假如是静态地增加内容,高度最好不要界说。扫瞄器能够主动伸缩,但是假如是静态的内容,高度最好定好。(仿佛偶然候不会主动往下撑开,不晓得详细怎样回事)
5、最狠的手腕-!important;
假如其实没有举措办理一些细节成绩,能够用这个办法.FF关于”!important”会主动优先剖析,但是IE则会疏忽.以下.tabd1{
background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/
background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}值得注重的是,必定要将xxxx!important这句安排在另外一句之上,下面已提过
IE7.0出来了,对CSS的撑持又有新成绩。扫瞄器多了,网页兼容性更差了,疲于奔命的仍是我们,为办理IE7.0的兼容成绩,找来了上面这篇文章:
如今我年夜部分都是用!important来hack,关于ie6和firefox测试能够一般显现,可是ie7对!important能够准确注释,会招致页面没按请求显现!搜刮了一下,找到一个针对IE7不错的hack体例就是利用“*+html”,如今用IE7扫瞄一下,应当没有成绩了。
如今写一个CSS能够如许:
#example{color:#333;}/*Moz*/
*html#example{color:#666;}/*IE6*/
*+html#example{color:#999;}/*IE7*/
那末在firefox下字体色彩显现为#333,IE6下字体色彩显现为#666,IE7下字体色彩显现为#999
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。 |
|