仓酷云

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

[DIV+CSS] 来讲讲:CSS在IE和Firefox兼容要点剖析

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

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

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

x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
IEvsFF

CSS兼容要点:

DOCTYPE影响CSS处置

FF:div设置margin-left,margin-right为auto时已居中,IE不可

FF:body设置text-align时,div必要设置margin:auto(次要是margin-left,margin-right)方可居中

FF:设置padding后,div会增添height和width,但IE不会,故必要用!important多设一个height和width

FF:撑持!important,IE则疏忽,可用!important为FF出格设置款式

div的垂直居中成绩:vertical-align:middle;将行距增添到和全部DIV一样高line-height:200px;然后拔出笔墨,就垂直居中了。弱点是要把持内容不要换行

cursor:pointer能够同时在IEFF中显现游标手指状,hand仅IE能够

FF:链接加边框和背景致,需设置display:block,同时设置float:left包管不换行。参照menubar,给a和menubar设置高度是为了不底边显现错位,若不设height,能够在menubar中拔出一个空格XHTML+CSS兼容性办理计划小集

利用XHTML+CSS构架优点很多,但也的确存在一些成绩,不管是由于利用不纯熟仍是思绪不明晰,我就先把一些我碰到的成绩写鄙人面,省的人人到处找^^

1.在mozillafirefox和IE中的BOX模子注释纷歧致招致相差2px办理办法:

div{margin:30px!important;margin:28px;}

注重这两个margin的按次必定不克不及写反,据阿捷的说法!important这个属性IE不克不及辨认,但其余扫瞄器能够辨认。以是在IE下实在注释成如许:

div{maring:30px;margin:28px}

反复界说的话依照最初一个来实行,以是不成以只写margin:XXpx!important;

2.IE5和IE6的BOX注释纷歧致IE5下div{width:300px;margin:010px010px;}div的宽度会被注释为300px-10px(右添补)-10px(左添补)终极div的宽度为280px,而在IE6和其他扫瞄器上宽度则是以300px+10px(右添补)+10px(左添补)=320px来盘算的。这时候我们能够做以下修正

div{width:300px!important;width/**/:340px;margin:010px010px}

,关于这个/**/是甚么我也不太分明,只晓得IE5和firefox都撑持但IE6不撑持,假如有人了解的话,请告知我一声,谢了!:)

3.ul标签在Mozilla中默许是有padding值的,而在IE中只要margin有值以是先界说

ul{margin:0;padding:0;}

就可以办理年夜部分成绩

4.关于剧本,在xhtml1.1中不撑持language属性,只必要把代码改成

<scripttype="text/javascript">

就能够了

当遇到几个选择器共享一个声明的时候,可以分组放在一起,每个选择器必须以逗号隔开。例:h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全,分组结尾不能有逗号。
飘飘悠悠 该用户已被删除
沙发
发表于 2015-1-18 05:59:24 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
活着的死人 该用户已被删除
板凳
发表于 2015-1-25 16:54:23 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
山那边是海 该用户已被删除
地板
发表于 2015-2-3 11:56:54 来自手机 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
再现理想 该用户已被删除
5#
发表于 2015-2-8 22:40:07 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
透明 该用户已被删除
6#
 楼主| 发表于 2015-2-26 12:44:33 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
不帅 该用户已被删除
7#
发表于 2015-3-8 15:19:25 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
admin 该用户已被删除
8#
发表于 2015-3-16 04:51:32 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
若相依 该用户已被删除
9#
发表于 2015-3-22 20:11:37 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 18:25

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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