IE兼容文档
IE6兼容兼容心得(自己总结的)

文档类型2010年8月19日16:32使用以下DOCTYPE可使避免IE6进入怪异模式,不适用文档声明或使用HTML3以下的文档声明会是IE6进入向下兼容IE5的怪异模式DOCTYPE (Document Type) 文档类型,说明 XML 或者 (x)HTML 的版本。
DTD (Document Type Definitions) 文档类型定义,浏览器根据 DTD 来解释页面标识,并展现出来。
DOCTYPE 通常(但不总是)包含指定的DTD文件的URL。
浏览器一般不读取这些文件,而是只识别常见的 DOCTYPE 声明。
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""/TR/html4/frameset.dtd">XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""/TR/xhtml11/DTD/xhtml11.dtd">源文档</jennior/blog/item/79eb1dfa8922539c59ee9057.html>根据w3c关于stack level 的介绍可以得出以下stack level 规则父级stacking context的背景、边界1.z-index值为负值的定位元素(值越小越在下)2.文本流中非定位的block块级子元素3.脱float 块的文本4.文本流中非定位的float浮动子元素/文字元素5.脱块文本/行内元素6.z-index:auto/0的定位元素7.z-index值为正的定位元素(值越大越在上)8.每个stacking context都包括以下stack level (后来居上):IE 6/IE7的规则父级stacking context的背景、边界1.z-index值为负值的定位元素(值越小越在下)2.脱块文本脱float 块文本(ie7)/行内元素3.未固定宽度文本流中非定位的block块级子元素4.固定宽度文本流中非定位的block块级子元素/文本流中非定位的、float浮动子元素/文字5.z-index:auto/0的定位元素6.z-index值为正的定位元素(值越大越在上)7.每个stacking context都包括以下stack level (后来居上):垂直堆栈2010年8月20日10:58IE6/7技巧2010年8月24日12:35禁用IE6/7默认的垂直滚动条(Disabled IE default Vertical Scroll bar)默认情况下,即使内容适合窗口大小,IE(译注:IE6/7)也会显示垂直滚动条。
亿赛通数据泄露防护系统安装手册 V2.0分析

文档编号:归档人:归档时间:亿赛通泄露防护(DLP)系统V3.8版本安装手册北京亿赛通科技发展有限责任公司产品中心二〇一一年六月北京亿赛通科技发展有限责任公司目录1 软件兼容性 (1)1.1 服务端的支持情况 (1)1.1.1对操作系统的支持 (1)1.1.2对IE浏览器的支持 (1)1.1.3对数据库的支持 (1)1.1.4文档权限支持如下应用软件及文件格式(透明加密支持*.*文件类型) (1)1.1.5对杀毒软件的支持 (2)1.2 客户端的支持情况 (2)1.2.1对操作系统的支持 (2)1.2.2对杀毒软件的支持 (2)2 软件安装 (3)2.1 服务器安装 (3)2.2 客户端安装 (7)3 系统运行前的准备 (13)3.1 检查CDG Server (13)3.2 配置SQL数据库 (14)3.3 检查SQL Server (16)4 软件卸载 (18)4.1 服务器卸载 (18)4.2 客户端的卸载 (20)1 软件兼容性1.1 服务端的支持情况1.1.1对操作系统的支持✓Windows 2000 server(SP4)✓Windows 2003 server✓Windows 2003 server 64 bit✓Windows 2008 server✓Windows 2008 server 64 bit1.1.2对IE浏览器的支持✓IE6.0✓IE7.0✓IE8.01.1.3对数据库的支持✓MS SQL Server 2000(SP3)✓MS SQL Server 2005✓MS SQL Server 2008✓MS SQL Server 2008 64 bit1.1.4文档权限支持如下应用软件及文件格式(透明加密支持*.*文件类型)✓Office 2000✓Office 20003✓Office 2007✓Office 2010✓AutoCAD 2004✓AutoCAD 2007✓AutoCAD 2010✓PDF相关应用程序✓记事本、写字板等文本处理程序1.1.5对杀毒软件的支持✓360安全卫士(杀毒)✓NOD32✓Avira✓诺顿(SEP)✓麦咖啡✓比斯图✓卡巴斯基6.0✓瑞星✓江民1.2 客户端的支持情况1.2.1对操作系统的支持✓Windows server 2000(SP4)✓Windows server 2003✓Windows XP SP2✓Windows XP (64 bit)✓Windows Vista✓Windows 7✓Windows 7 (64 bit)1.2.2对杀毒软件的支持✓360安全卫士(杀毒)✓NOD32✓诺顿(SEP)✓麦咖啡✓比斯图✓卡巴斯基6.0✓瑞星✓江民2 软件安装2.1 服务器安装步骤 1插入安装光盘,打开光盘所在目录,双击根目录下的Setup,启动安装向导,进入“安装界面”,如图1-1所示:图1-1安装界面步骤 2单击【下一步】按钮,选择【我接受许可证协议中的条款】。
【珍藏版】IE6,IE7,IE8,Firefox等浏览器兼容的css hack

IE6,IE7,IE8,Firefox等浏览器兼容的css hack一、开发平台的选择我很幸运, 我接触网页前台的时候Firefox2 已经十分红火, 我的所有工作都是在Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在IE 做好再到别的浏览器兼容来得容易, 因为IE 对老标准支持还是很不错的, 而IE 的一些特有功能人家却不支持. 所以我推荐以Firefox 结合Firebug 扩展作为平台.在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则:权衡成本:在浏览器被淘汰后,如何快速清理掉无用代码可维护:在资源成本和完美间平衡的向后兼容可读:省力、易记二、Hack 的顺序使用Firefox 作为平台, 只要代码写得够标准, 其实要Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,顺序如下:Firefox -> IE8 -> IE7 -> IE6 -> 其他三、CSS 选择器Hack/* Opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and(-webkit-min-device-pixel-ratio:0){head~body .sofish{display:block;}}这种写法的优缺点是:优点:全面,各种HACK都有;清理无用代码里易认缺点:选择器名称不易记;代码量多(要重复写选择器)四、CSS 属性Hack.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */}这种写法的优缺点是:优点:易记;代码少缺点:不全面五、IE 注释<!--[if IE]>IE only<![endif]--><!--[if !IE]>NOT IE<![endif]-->这种写法的优缺点是:优点:安全;向后兼容好;易维护缺点:用不好会增加HTTP请求;用得好代码又多六、浏览器探测:JS/后端程序判断// 以jQuery为例,检测是否是IE6,是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');}这种写法的优缺点是:优点:全面;易维护;可读性高缺点:占资源;代码量大(要重写选择器)总结:-----------------1、尽量使用单独HACK这样维护起来成本比较低,改动不会影响其他的浏览器,而一旦有浏览器淘汰,只要搜索关键字,就可以批量去掉这些代码。
最全的IE6,IE7,IE8与Fireofx浏览器兼容问题整理(2)

从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.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; display:inline;}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 下面根本等于没有设置宽度和高度。
IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

小知识:什么是CSS hack?由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
各浏览器CSS hack兼容表:代码示例:#test{color:red; /* 所有浏览器都支持*/color:red !important;/* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/整体测试代码示例:.test{color:#000000;color:#0000FF\0;[color:#00FF00;*color:#FFFF00;_color:#FF0000;}其他说明:1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:<meta http-equiv=”x-ua-compatible” content=”ie=7″ />2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。
3、还有其他写法,比如:*html #test{}或者*+html #test{}4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:/TR/html4/loose.dtd5、顺序:Firefox、IE8、IE7、IE6依次排列。
不同浏览器兼容报告

Shuo de——中国金融数据及工具首席服务商IE、FF、Safari、OP不同浏览器兼容报告柯伯勋2011-03-08上海万得资讯科技有限公司Shanghai Wind Information Co., Ltd.地址: 上海浦东新区福山路33号建工大厦9楼邮编Zip : 200120电话T el : (8621)6886 2280传真Fax : (8621)6886 2281Email : sales@主页:1浏览器内核简介浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。
负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。
所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
浏览器内核很多,如果加上所有的几乎没有什么人在用的非商业的免费内核,那么可能大约有10款以上甚至更多,不过通常我们比较常见的大约只有以下四种,下面先简单介绍一下。
1.1Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE8。
Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。
此外,为了方便也有很多人直接简称其为IE内核(当然也不排除有部分人是因为不知道内核名称而只好如此说)。
由于IE本身的“垄断性”(虽然名义上IE并非垄断,但实际上,特别是从Windows 95年代一直到XP初期,就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位)而使得Trident内核的长期一家独大,微软很长时间都并没有更新Trident内核,这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节(2005年),二是Trident内核的大量Bug等安全性问题没有得到及时解决,然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点,也有很多用户转向了其他浏览器,Firefox和Opera就是这个时候兴起的。
IE插件说明文档

IE插件说明文档项目名称:IEPioneer;背景:本软件产品全称为IEPioneer。
它是一款方便用户上网浏览网站工具。
用户安装以后,本软件会在指定目录(最好是Program Files文件夹下)放置好软件需要使用的文件,并和IE浏览器实现交互,打开IE浏览器即可使用该软件。
该软件能为用户提供广告拦截、搜索等功能,简单、便捷的操作模式,绿色上网不受干扰,集成百度搜索引擎,有效的为用户提供快捷搜索。
软件类型:IE插件,BHO,在IE工具栏上增加一个标准按钮,动态链接库只需要一个,名称为: IEPioneer.dll.运行环境:基于IE内核的浏览器.开发环境:语言:C/C++,可以使用MFC.环境:VS2005.功能说明(以IE风行者和IEPlus为例):1.IE标准按钮a)点击按钮弹出菜单,显示常用功能如图:i.IEPioneer首页(导航到软件首页,先随便设置一个)ii.最近访问的网址1.清理历史痕迹(不可以使用时禁止点击)2.显示历史记录iii.自动刷新1.自动刷新当前页面(?) ?代表时间2.设置刷新时间弹出对话框进行设置,或使用其他方法iv.IE痕迹清理(调用IE默认的删除COOKIE等功能)v.静音浏览(不播放页面声音)vi.截图1.将网页保存为图片(将当前网页整张截图保存到本地,JPEG,BMP,PNG)2.屏幕截图(类似QQ的截图)vii.网页过滤(需要显示是否选中)1.过滤浮动广告2.过滤FLASH3.过滤弹出广告viii.IEPioneer设置ix.关于IEPioneerb)首次安装软件进入设置向导2.HTML设置页面(不需要说明版本号)a)常规设置i.显示上次浏览器崩溃时,未关闭的标签(需要使用一个页面进行控制,如下图)ii.对于外部调用,启动时不显示上述页面iii.网站无法访问时显示友好错误页面iv.启用浏览历史功能1.设置浏览历史显示数量v.打开新窗口默认最大化vi.IE7设置1.双击关闭选项卡2.保证IE最多只有一个进程3.自动恢复上次关闭IE时的浏览历史(需要使用一个页面控制,如a):i )4.从地址栏打开新选项卡5.从搜索框打开新选项卡6.从收藏夹打开新选项卡7.网页中打开新窗口设置(IE自行决定,新窗口,新选项卡)b)媒体保存(一般用alt+ 鼠标,捕获网页中的图片,音乐,FLASH,视频)i.启用媒体保存ii.启用快速保存(如果不启用,则弹出文件对话框)1.保存路径2.遇到同名文件时c)广告过滤i.过滤网页中的浮动广告ii.过滤网页中的FLASH动画iii.过滤弹出广告iv.解除网页脚本对用户操作的限制v.网址过滤,并可以设置黑名单d)拖拽搜索i.启用拖拽搜索ii.拖放链接时是否在新的页面打开iii.拖放文字时是否在新的页面打开e)鼠标手势i.启用鼠标手势ii.手势内容1.下下翻页2.上上翻页3.左后退4.右前进5.上左返回首页6.上右开启新的页面7.下左关闭当前页面8.下右关闭所有页面9.右左刷新当前页面10.左右停止当前页面11.上下滚动到页面尾端12.下上滚动到页面顶端iii.动作内容1.上翻页2.下翻页3.后退4.前进5.返回首页6.关闭当前页面7.关闭所有页面8.滚动到页面顶端9.滚动到页面尾端10.开启新的页面11.刷新当前页面12.停止当前页面f)IE修复i.恢复默认浏览器ii.恢复IE选项到默认设置iii.清除第三方插件(保留自己)g)快捷键i.设置热键网址,从F1-F12ii.设置屏幕截图热键3.功能介绍a)打开IE时显示上次浏览器崩溃时,未关闭的标签,如果是从其他的程序打开的IE不显示,根据设置操作b)当IE打开链接错误时显示友好页面c)浏览历史功能,每访问一个网页便记录下来,如果超过了指定的数量,则保留最新的.d)打开新窗口默认最大化e)IE7设置i.双击关闭选项卡,鼠标双击选项卡时关闭当前选项卡ii.保证IE最多只有一个进程iii.自动恢复上次关闭IE时的浏览历史,如果关闭IE时有页面没有关闭,下次打开IE 时打开这些网页iv.从地址栏,搜索框,收藏夹打开新选项卡还是在当前选项卡打开新的地址v.地址栏如果打开的不是链接则使用搜索引擎进行搜索vi.拖拽搜索时使用搜索引擎,不使用IE的搜索vii.媒体保存,保存媒体到指定路径viii.广告过滤,不需要用户编辑过滤的元素和规则,在阻止了广告等的时候需要提示用户.ix.鼠标手势,用户可以从已有的功能里面编辑鼠标手势动作其他说明:软件中使用到的图片,图标,JS,HTM等等都放在资源里面,用户使用设置功能的时候调用DLL里面的资源(好像是使用时将资源解压到临时目录再使用吧).。
史上最全IE6.IE7.IE9.IE10.谷哥.火狐各浏览器网页兼容性介绍总结

兼,是什么!你会想到是什么,作为一个跟HMTL+CSS打交道的人来说,我只能说,我想到的只有兼容性了,兼容性自始至终困惑着许多人,例如坑爹的IE,是纵多主流浏览器中比较戳的那一个,因BUG手下纵多而闻名,家族几代问题层出不穷。
最坑爹的那个就是IE6,被纵多开发人员包括前端人员所憎恶。
却受许多企业的爱戴。
顺便说一下为什么IE6还在中国活得好好的,IE6是Windows XP中自带的一种浏览器,而Windows XP目前来说是微软开发得比较好也是比较成功的系统,使用人数多。
IE6的稳定性也比较好,目前,大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因,IE6之所以盛行当然不只这一些原因,至少IE6什么时候会死那只是时间的问题罢了,在没死之前,我们得保证我们能活着。
好了,接下来来看一下一些兼容性的问题吧,这里只列出数项,日后继续完善。
1.注释引起的血案(1)在注释的时候,如果注释不当,部分浏览器会将会解析错误。
(demo1)如:<!-- 这里是注释内容-->正常显示;<!-- 这里是注释内容- ->时则在IE浏览器下正常显示,在Chrome、Firefox、Safari下不可显示。
或者->也是如此。
解决方法:在进行注释时切记不要着急,看好是否注释有问题,最好能够用VS中自带的注释,以保万无一失。
详见demo1。
(2)注释引发的血案(demo11)文字溢出:问题见demo11,test1:去掉<div style=”float:left;”></div> 中的“float:left”,就会发现多出来的字不见了,页面正常显示;同样去除<div style=”width:350px;float:right;”>中的“float:right”,多余的字也同样消失,页面正常显示。
分析:文字溢出与区块的浮动有关。
test2:把注释放到<div style=”float:left”></div>前面,多余的字消失,页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面,多余的字也同样消失,页面正常显示。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
一、CSS HACK(兼容各种浏览器的CSS秘方)写法以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用。
1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)CSS:#wrapper{width: 100px!important;width: 80px;}2, IE6/IE77对FireFox*+html 与*html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签.CSS:#wrapper{#wrapper { width: 120px; }*html #wrapper { width: 80px;}*+html #wrapper { width: 60px;}}注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:HTML:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””/TR/html4/loose.dtd">二、万能float 闭合(非常重要!)关于clear float 的原理可参见[How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.CSS:.clearfix:after{content:“.”;display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}.clearfix {display:block;}三、Ie6、Ie7和Firefox兼容性Css写法区别不同浏览器的CSS hack写法:区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green !important;background:blue;区别IE7与FF:background:orange; *background:green;区别FF,IE7,IE6:background:orange;*background:green !important;*background:blue;注:IE都能识别*;标准浏览器(如FF)不能识别*;IE6能识别*,但不能识别!important, IE7能识别*,也能识别!important; FF不能识别*,但能识别!important;附加一个火狐下透明滤镜的实现:.test{background:#000;color:white;width:200px;position:absolute;left:10px;top:10px;filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;}这里关键的是filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;四、全面兼容ie6,ie7,ie8,ff的CSS HACK写法五、CSS兼容IE6,IE7,FF的技巧一、CSS HACK以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用。
1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)PLAIN TEXTCSS:#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}2, IE6/IE77对FireFox*+ht ml 与*ht m l 是IE特有的标签, firefox 暂不支持.而*+ht ml 又为IE7特有标签.PLAIN TEXTCSS:#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+ht ml #wrapper { width: 60px;} /* ie7 fixed, 注意顺序*/}注意:*+ht ml 对IE7的HACK 必须保证HTML顶部有如下声明:PLAIN TEXTHTML:<!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.01Transitional//EN‖‖/TR/ht ml4/loose.dtd‖>二、万能float 闭合(非常重要!)关于clear float 的原理可参见[How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=‖clearfix‖即可,屡试不爽.PLAIN TEXTCSS:/* 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 */三、其他兼容技巧(再次啰嗦)1, FF下给div 设置padding 后会导致width 和height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将line-height 设置为当前div 相同的高度, 再通过vertical-align: middle.(注意内容不要换行.)2).水平居中. m argin: 0 auto;(当然不是万能)3, 若需给a 标签内内容加上样式, 需要设置display: block;(常见于导航标签)4, FF 和IE 对BOX 理解的差异导致相差2px 的还有设为float的div在ie下m argin加倍等问题.5, ul 标签在FF 下面默认有list-style 和padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部wrapper 的div 不要定死高度, 最好还加上overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于IE.1 针对firefox ie6 ie7的css样式现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:PLAIN TEXTCSS:#1 { color: #333; } /* Moz */* html #1 { color: #666; } /* IE6 */*+ht ml #1 { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题主要的样式定义如下:PLAIN TEXTCSS:body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。
解决办法就是在子元素定义时候设定时再加上―MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ‖需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.PLAIN TEXTCSS:#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-}4 浮动ie产生的双倍距离PLAIN TEXTCSS:#box{ float:left; width:100px; m argin:0 0 0 100px; //这种情况之下IE会产生200px 的距离display:inline; //使浮动忽略}这里细说一下block,inline两个元素,Bloc k元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);PLAIN TEXTCSS:#box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效果diplay:table;5 IE与宽度和高度的问题IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。
要解决这个问题,可以这样:PLAIN TEXTCSS:#box{ width: 80px; height: 35px;}ht ml>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}6 页面的最小宽度min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。