div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

合集下载

网站制作中遇到的浏览器兼容问题解决方法

网站制作中遇到的浏览器兼容问题解决方法自从Div+CSS布置网站页面的程序走入网站设计制作领域，因自身的优点，不断的得到网站设计制作工作者的青睐。

使用Div+CSS布局网页可以大大缩减页面代码，并且可以很快的提高网页的打开速度，并且能够获得搜索引擎很高的认可。

但是Div+CSS布置网页也有它天生的缺陷，那就是网站与各大主流浏览器的兼容问题，如果不能够解决网站的兼容问题，那么在使用上会给企业带来很大的负面影响。

解决浏览器兼容问题也是程序员或者是网站制作人员必修的一门功课。

作为使用Div+CSS布局网站页面的设计师来说，尤其是新手在写代码时切忌要在IE和FF两个环境下去测试。

Div+CSS布局网站页面造成各大主流浏览器不兼容的问题主要是各个浏览器给CSS程序默认属性值不同而引起的兼容问题。

如何解决网站在各个不同浏览器下的兼容问题呢？有以下五种办法可以解决网站兼容问题；1，通过给CSS写属性值来调整兼容问题。

通过调整一下属性值；body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;pa dding:0;} img{border:0px;} ul {margin:0px;padding:0px;}/ ul li{list-style:none;} 上面的建站常用代码好比是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页2，微软IE浏览器和火狐浏览器的对象居中问题；IE浏览器下设计师应该知道只要设置body{text-align:center;}这样就可以居中显示。

相同的办法在火狐浏览器上就行不通了。

这里就需要修改成；body:{text-align:center;margin:0px auto;}Margin，而它的意思就是上下距离值为0像素，左右为自动。

所以FF就会居中显示，这样就能够解决IE浏览器与火狐浏览器的兼容问题了。

【珍藏版】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 注释这种写法的优缺点是：优点：安全；向后兼容好；易维护缺点：用不好会增加HTTP请求；用得好代码又多六、浏览器探测：JS/后端程序判断// 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');}这种写法的优缺点是：优点：全面；易维护；可读性高缺点：占资源；代码量大（要重写选择器）总结：-----------------1、尽量使用单独HACK这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。

解决CSS浏览器兼容性问题的4种方案

解决CSS浏览器兼容性问题的4种⽅案前端是⼀个苦逼的职业，不仅因为技术更新快，⽽且要会的东西实在太多了，更让⼈头疼的是，还要⾯临各种适配、兼容性问题。

为什么会有浏览器兼容性问题？还不是因为浏览器⼚商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同⼚商，甚⾄同⼀⼚商不同版本，对同⼀段CSS的解析效果也不⼀致，这就导致了页⾯显⽰效果不统⼀，也就带来了兼容性问题。

多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多，我们也不可能每⼀个都要去兼容，对于⽤户量⼀般的产品，把主流浏览器的适配做好，就已经很不错啦。

根据百度流量研究院提供的2018年8⽉⾄2019年2⽉的数据可以看出，Chrome占⽐46.28%，IE系仍然占有很⼤⽐重，任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天，不想去关注太多细节问题，⽐如那个css样式需要我们去兼容，⽽是想讨论⼀下⼤的解决思路，主要包括4个⽅⾯，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。

1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是对其进⾏初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。

*{margin: 0;padding: 0;}关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这⾥给⼤家推荐⼀个库，Normalize.css，github star数量接近3.4万，选取展⽰其中⼏个样式设置，如下html {line-height: 1.15; /* Correct the line height in all browsers */-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */}body {margin: 0;}a {background-color: transparent; /* Remove the gray background on active links in IE 10. */}img {border-style: none; /* Remove the border on images inside links in IE 10. */}通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。

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依次排列。

css实现div水平、垂直居中兼容chrome、ie8

css实现div⽔平、垂直居中兼容chrome、ie8⽰例1 chrome33、ie8测试通过：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">/* 固定宽⾼div，在浏览器中保持⽔平、垂直居中 */#div1 {width:400px; height:300px;position:absolute;left:50%; top:50%;margin-left:-200px; margin-top:-150px;background:#f90;}</style></head><body><div id="div1"></div></body></html>⽰例2 chrome33、ie8测试通过：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">/* 固定宽⾼div在固定宽⾼div中保持⽔平、垂直居中 */#div1 {width: 400px;height: 200px;background-color: #f00;position: relative;/* 为div赋予单元格属性，使其可以应⽤align属性 */display: table-cell;vertical-align: middle;}#div2 {width: 200px;height: 100px;background-color: #0f0;/* 使当前标签在⽗标签中⽔平居中，即0 auto 0 auto */margin: 0 auto;display: block;}</style><body><div id="div1"><div id="div2"></div></div></body></html>⽰例3 chrome33、ie8测试通过：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}#div1 {width: 400px;height: 200px;background-color: #f00;/* 使当前标签在⽗标签位置固定 */position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -200px;}#div2 {width: 200px;height: 100px;background-color: #0f0;display: block;/* 使当前标签在⽗标签中保持⽔平、垂直居中 */top: 50%;left: 50%;margin: 50px 0 0 100px;}</style></head><body><div id="div1"><div id="div2"></div></div></body></html>⽰例4 chrome33测试通过，ie8测试不通过，参考/tiy/t.asp?f=css3_box-pack：复制代码代码如下:<!DOCTYPE html><html><head><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 使⽤box-pack样式实现div中⼦元素居中 */#div1 {width:350px;height:200px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;/* Safari, Chrome, and Opera */display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;/* W3C */display:box;box-pack:center;box-align:center;}#div2 {width:100px;height:50px;background-color: #ff0;border:1px solid black;}</style></head><body><div id="div1"><div id="div2"></div></div></body></html>注：对页⾯中所有元素应⽤box-sizing:border-box样式是为了将padding、margin值都计⼊width、height中，即为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制(/cssref/pr_box-sizing.asp)。

css+div排版史上最全的解决浏览器兼容问题

css+div排版史上最全的解决浏览器兼容问题在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important;一、CSS 兼容以下两种方法几乎能解决现今所有兼容.1, !important (不是很推荐，用下面的一种感觉最安全)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码:#wrapper {width: 100px!important;width: 80px;}2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.代码:#wrapper { width: 120px; }*html #wrapper { width: 80px;}*+html #wrapper { width: 60px;}注意:*+html 对IE7的兼容必须保证HTML顶部有如下声明：代码:二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，关于clear float 的原理可参见[How T o Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽.代码:.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:inline-block;}.clearfix {display:block;}三、其他兼容技巧(相当有用)1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过vetical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style. 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码: 兼容代码:兼容最推荐的模式。

课题_CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

CSS兼容IE6 IE7 IE8 IE9 Firefox的总结<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>无标题页</title><style type="text/css">#div{/* 一：*各种浏览器css hack兼容情况*/width:200px;height:200px;background: red; /* 所有浏览器*//* background: black!important; /* 有ie7,ie8,ie9,,firefox,chrome支持*//* _background: yellow; /* 只有ie6支持*//* +background:yellow; /* 只有ie6,ie7支持*//* *+background:yellow; /* 只有ie6,ie7支持*//* *background:black; /* 只有ie6,ie7支持*//* background:yellow\9; /* 有ie6,ie7,ie8,ie9支持*//* background:black\0; /* 有ie8,ie9支持*/}/* body:nth-of-type(1) div /* 有ie9,firefox,chrome,Safari支持*//*{width: 200px;height: 200px;background: red;}*//* 二：其他说明1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv="x-ua-compatible" content="ie=7" />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。

解决DIV居中对齐和IE与Foxfire CSS 宽度兼容性问题5页word文档

1、针对firefox ie6 ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：以下为引用的内容：#1 { color: #333; } /* Moz */* html #1 { color: #666; } /* IE6 */*+html #1 { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2、css布局中的居中问题主要的样式定义如下：以下为引用的内容：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、盒模型不同解释以下为引用的内容：#box{width:600px;//for ie6.0- w\idth:500px;//for ff+ie6.0}#box{width:600px!important//for ffwidth:600px;//for ff+ie6.0width /**/:500px;//for ie6.0-}4、浮动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;5、IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。

div+css浏览器兼容问题解决方法

div+css浏览器兼容问题解决方法从网上收集了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;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}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下面根本等于没有设置宽度和高度。

CSS各浏览器兼容问题整理

目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器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支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#tip{background:blue; /*Firefox背景变蓝色*/background:red\9; /*IE8背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

firefox,ie7,ie6兼容性问题,和css解决方案

现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对! important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

我真希望那个IE6快点退休……css Hacks，css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:，这个CSS补丁(hacks)很简单，在样式表中单独为ie7设置某个元素，id或者class前面这样写:*:first-child+html #ID{}或者*:first-child+html .class{}别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.IE7 修复了很多bug，也增加了对一些选择符的支持，所以现在诸如*html {} 和html>body {} 等针对IE 隐藏或显示的hack 都会在IE7 中失效。

虽然CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在HTML 中，CSS Hack 还是有用武之地的。

Nanobot 发现了一些针对IE7 的CSS Hack，具体就是：>bodyhtml**+html这三种写法，其中前两种都是不合法的CSS 写法，在标准兼容浏览器中被被忽略，但是IE7 却不这么认为。

网页排版中IE6,IE7,Firefox浏览器兼容性写法

网页排版中IE6，IE7，Firefox浏览器兼容性写法本文向大家简单介绍一下DIV+CSS网页排版中IE6，IE7，firefox火狐浏览器兼容性写法，希望本文介绍对你的学习有所帮助。

AD：你知道DIV+CSS网页排版中IE6，IE7，Firefox火狐浏览器兼容性写法吗，这里和大家分享一下，DIV+CSS浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。

DIV+CSS网页排版中IE6，IE7，firefox火狐浏览器兼容性写法DIV+CSS浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。

用DIV+CSS布局的网页在IE下显示一切正常，可是在火狐（FireFox）浏览器里打开，本来好好网页一下子就全乱了.让人怎么看?这一定会影响到你的网站的推广,seo优化,不利于搜所引擎的搜索.所以解决DIV+CSS浏览器兼容的问题是完全必须的.下面来看一下DIV+CSS浏览器兼容的实例，区分IE6，IE7，Firefox火狐浏览器CSS的写法：先来分开区分一下。

◆首先声明DIV+CSS浏览器兼容性IE6与IE7与火狐(firefox)的一些识别规则：1.IE都能识别*，标准浏览器(如Firefox)不能识别*；2.IE6能识别*，但不能识别!important,3.IE7能识别*，也能识别!important;4.firefox不能识别*，但能识别!important;◆请看下简单的DIV+CSS浏览器兼容实例:1．IE6和firefox的区别：background:orange;*background:blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.2.IE6和IE7的区别：background:green!important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色3.区别IE7与Firefox：background:orange;*background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色4.Firefox，IE7，IE6：background:orange;*background:green!important;*background:blue;意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.为了更加清楚的来表达说明DIV+CSS浏览器兼容下面表格是更加清楚的能表达IE6,IE7,Firefox之间的识别标识区别:IE6 IE7 Firefox* √√×important ×√√。

使用DIV+CSS布局注意兼容问题

使用DIV+CSS布局注意兼容问题对于了解网站知识的人来说，我们都知道，目前DIV+CSS网站布局是时下最为流行的一种布局方式，这里郑州网站制作专家要指出的，DIV+CSS布局虽好，但却也存在一定不弊端，比如说它的兼容性就不是很好，下面我们一起来看一下DIV+CSS在制作网站时需要考虑的兼容代码：区别IE6与FF：background:green !important;background:blue;和background:orange;*background:blue;区别IE7与FF：background:orange; *background:green;区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue;相对于区别代码，这里需要记住的是IE7和IE8的DIV+CSS是可以兼容的。

下面我们来详细的了解一下：HEAD1. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !important 可被FireFox 和IE7识别 * 可被IE6、IE7识别 _ 可被IE6识别 *+ 可被IE7识别2. IE专用的条件注释3. 几个浏览器对实际像素的解释 IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right) Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)4. 鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持;所以为了兼容都用pointer5. FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。

关于各大浏览器的兼容问题解决方案大全

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。
10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
</body>
如果我们为text容器设置了左浮动的属性，并将content容器定义了200象素的宽，就需要为content容器增加overflow:auto属性，以清除text容器的浮动。否则FF下则会出现问题。（如图2）
代码如下：
以下是引用片段：
<style type="text/css">
.content{ border:10px solid #F00; overflow:auto; zoom:1;}
.text{ width:200px; height:300px; background:#000; float:left;}
9. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img和文字都 float起来。
div+css在不同浏览器的兼容问题
每次做网页的时候用div+css设计时总会出现浏览器兼容的问题，明明在ie6里面显示的好好的在火狐里面有会有些乱掉，特别讨厌，所以在这边就把常会出现的问题整合出来，供大家也供自己平时方便查看，里面的都是我经常做网页的时候会碰到的，但是那些解决的办法却不是我想出来的，但是我验证了，那些都是真理哦！应该还有很多是我没注意到的，所以在看的如果有懂的就帮我补充一下吧

CSS过滤器兼容ie，火狐和谷歌

CSS过滤器兼容ie，⽕狐和⾕歌这篇汇总主要是提供⼀些CSS不透明的详细介绍，代码⽰例和解释，以实现这项有⽤的CSS技术在您的项⽬中兼容所有浏览器。

关于CSS 透明度，有⼀点需要注意的是，它虽然使⽤了很多年，但它⼀直以来都不是⼀个标准属性。

它是⼀种⾮标准技术，应该是CSS3规范的⼀部分。

1. 旧的Opacity设置以下代码是Firefox和Safari旧版本所需的透明度设置:#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; } -khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专⽤属性现在已经过时了，除⾮你还有需要兼容Safari 1.x.的⽤户。

第⼆⾏使⽤专⽤属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。

Firefox 0.9以后就不要求使⽤-moz-opacity属性，Firefox 3.5（现在使⽤Gecko引擎）已经不在⽀持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：#myElement { opacity: .7; } 上述语法将设置⼀个元素为70％不透明（或30%透明）。

设置opacity:1将使元素不透明，⽽设置opacity:0将使得元素完全不可见。

你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越⼩就越接近透明。

opacity属性可以精确地⼩数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。

⼀般情况下，精确到⼀位就可以了，取值如“.3”或“.7”。

3. IE下的CSS透明度 IE下照旧有别于其他浏览器，并且⽬前也有三个不同版本的IE在⼴泛使⽤，透明度设置是不同的，有时需要额外的CSS来控制：#myElement { filter: alpha(opacity=40); } 上⾯的CSS使⽤专⽤的filter属性来设置IE6-8透明度。

div+css在不同浏览器不兼容问题

或者
.hackbox{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
IE7、FF 共用
height: 100px !important（优先级）;
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important (不是很推荐，用下面的一种感觉最安全)
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
代码:
<style>

IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

IE6、IE7、IE8、Firefox 兼容性 CSS HACK1.区别 IE 和非 IE 浏览器 CSS HACK 代码#divcss5{ background:blue; /*非 IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色 */ } 2.区别 IE6,IE7,IE8,FF CSS HACK 【区别符号】「\9」「*」「_」：、、【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为 IE 系列浏览器可读「\9」，而 IE6和 IE7可读「*」(米字号)，另外 IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得 CSS 语法，所以就可以有效区分 IE 各版本和非 IE 浏览器(像是 Firefox、 Opera、 Google Chrome、 Safari 等)。

3.区别 IE6、IE7、Firefox (EXP 1) 【区别符号】「*」「_」：、【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色 */ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }【说明】：IE7和 IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是 IE7却无法读取「_」，至于 Firefox(非 IE 浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分 IE6、IE7、Firefox 4.区别 IE6、IE7、Firefox (EXP 2) 【区别符号】「*」「!important」：、【示例】：#divcss5{ background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ *background:orange; /*IE6 背景变橘色*/ } 【说明】IE7可以辨识和：「*」「!important」但是 IE6只可以辨识，，「*」却无法辨识「!important」，至于 Firefox 可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔 IE6、IE7、Firefox。

(十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法

(十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法简单方法：IE6,IE7,IE8,FF的兼容方法(2)浏览器兼容代码：浏览器符号IE6 IE7 IE8 FF * !important _ \9 *html *+html 说明：代表能识别；代表不识别1、案例一（常用）如果各个浏览器的高度都不相同，代码如下：.warp{ Height:100px; /*IE6、IE7、I浏览器兼容代码：说明：”√”代表能识别；” ×”代表不识别1、案例一（常用）如果各个浏览器的高度都不相同，代码如下：.warp{Height:100px; /*IE6、IE7、IE8、FF识别*/Height:110px\9; /*IE8识别*/*height:120px!important; /*IE7 识别*/*height:130px; /*IE6、IE7识别，但上一段代码中!important的级别比*号的级别高，所以此段代码只有IE6中才有效*/}2、案例二如果各浏览器高度只有IE6和IE7中相同，而FF不同，代码如下：原理：1.DOCTYPE 影响 CSS 处理2.FF: div 设置margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置t ext-align 时, div 需要设置margin: aut o(主要是margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但IE 不会, 故需要用!import ant多设一个height和width5.FF: 支持!important, IE 则忽略, 可用!import ant 为FF特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

_margin:0px;前面加个下划线“_“为单独控制IE6IE8和firefox选择！importantbackground-color:#FF0000 !important;IE7支持*background-color:#0000FF;（即对这个感冒）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 和width5.FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行7.cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅IE 可以8.FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。

参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。

9.在mozilla firefox和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;)<div id=”floatA” ></div><div id=”floatB” ></div><div id=”NOTfloatC” ></div>这里的NOTfloatC并不希望继续平移，而是希望往下排。

这段代码在IE中毫无问题，问题出在FF。

原因是NOTfloatC并非float标签，必须将float标签闭合。

在<div class=”floatB”></div><div class=”NOTfloatC”></div>之间加上<div class=”clear”></div>这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float 属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可：.clear{clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout 私有属性(万恶的IE)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}2、margin加倍的问题设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;例如：<div id=”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-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要将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.关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对FireFox*+html 与*html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签.<style>#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序*/}</style>注意:*+html 对IE7的HACK 必须保证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" 即可,屡试不爽.<style>/* 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 */</style>。