仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 973|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发FireFox扫瞄器和IE扫瞄器下CSS兼容成绩

[复制链接]
飘飘悠悠 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:08:49 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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)等图片处理软件将需要制作的界面布局简单的构画出来。
变相怪杰 该用户已被删除
沙发
发表于 2015-1-18 05:22:29 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
莫相离 该用户已被删除
板凳
发表于 2015-1-25 22:21:23 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
海妖 该用户已被删除
地板
发表于 2015-2-4 11:15:27 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小女巫 该用户已被删除
5#
发表于 2015-2-9 22:21:01 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
冷月葬花魂 该用户已被删除
6#
发表于 2015-2-28 01:52:21 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
蒙在股里 该用户已被删除
7#
发表于 2015-3-9 19:54:20 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
因胸联盟 该用户已被删除
8#
发表于 2015-3-17 01:10:10 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
兰色精灵 该用户已被删除
9#
发表于 2015-3-23 15:25:33 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 13:51

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表