来一发FireFox扫瞄器和IE扫瞄器下CSS兼容成绩
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。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)等图片处理软件将需要制作的界面布局简单的构画出来。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
页:
[1]