ie6,ie7,ie8 css bug兼容解决记录

合集下载

如何解决同时使用IE6、IE7、IE8及网页兼容问题

如何解决同时使用IE6、IE7、IE8及网页兼容问题如何解决同时使用IE6、IE7、IE8及网页兼容问题作者：武汉创研人气：0 标签：浏览器兼容问题 IE6、7、8 有时候建设好的网站在IE7中能正常显示，但在IE8中就会出现错位情况，其实，只需要在网页中的HEAD内加行代码即可同时兼容IE7和IE8：至于IE6、IE7及火狐的兼容问题就太多了，网络上也有大量解决办法，所以不再一一叙述，只讲这个IE7和IE8兼容的简单问题。

而有些做网页构架的朋友则会遇到一个很烦的问题，就是个浏览器对CSS 的解析不同问题，会导致很多错误，经常需要在各个浏览器中浏览测试，但WINDOWS默认不允许同时安装IE6或IE7、IE8 ，那就只能在不同电脑中跑着浏览测试吗？不用，完全可以解决此问题。

IE6与IE7共存解决办法：1、下载IE7，这一步必不可少的。

2、用WinRar或WinZip之类的软件，把下载的IE7的exe可执行文件，解压到任意一个文件夹内。

3、下载Download Internet Explorer 7 standalone Zip 很小的，149KB。

4、把上面一步下载的ZIP包解压到任意一个文件夹之后，会得到的IE7s.exe和LICENSE.RTF两个文件。

把IE7s.exe 复制到刚刚你IE7解压出来的文件夹内。

5、在你解压的IE7的文件夹内，有一个update文件夹，执行其中的xmllitesetup.exe。

6、最后一步，运行IE7s.exe，会弹出一个命令框对程序进行注册，等待一会，就会弹出美丽的IE7了。

你再打开IE6看看，是不是可以同时用了？IE7与IE8共存解决办法：安装IE8，IE8状态下，如要变成IE7，按下状态栏的“7Emulate IE7”按钮，确定，然后退出浏览器，再重新打开，发现现在就是IE7了。

IE7状态下，如要变回IE8，点击一下“7Emulate IE7”按钮，确定，恢复弹出的形状，然后退出浏览器，再重新打开，发现现在就是IE8了。

IE8网页显示不正常,兼容试图全搞定

IE8无法调用js、图片错位、文字跑远等问题，使用兼容性视图全搞定
今天测试eoffice发现只有IE8访问才会产生如下问题：
路径：流程配置-定义流程-（选择任意流程），打开节点设置-出口条件
问题出现：出口条件页面单击【添加】按钮，打开的条件设置页面，单击【验证】或者【保存】按钮，产生js错误，如下图。

解决方案：使用IE8的兼容性视图访问即可。

操作步骤：
恢复正常了。

而且您还不用担心每次都需要这么操作，为了不影响您的上网体验，事实上在您点过兼容性视图按钮后，这个网站将会被自动保存到兼容性列表中，下次您再登录这个页面，IE8会自动启用兼容性视图。

当然IE8还提供了一个一劳永逸的办法，您可以通过简单的设置，将所有的网站都用兼容性视图方式显示。

点击IE右侧的“工具”按钮，选择“兼容性视图设置”
在弹出的对话框中，勾选“在兼容性视图中显示所有网站”, 这样就可以避免由于兼容性而造成的页面显示问题的出现
小技巧：网页显示不正常，出现图片错位，文字跑远……等等，别急，试试IE8自带的”兼容性视图”功能吧！其实出现网页显示问题，一般不是电脑或者浏览器有问题，而是由于各网站开发标准不同，所以在不同的浏览器上打开时就可能出现页面显示问题。

当IE8检测到某网站不
兼容时，地址栏右侧就会出现兼容性视图按钮出现问题只需轻轻一点，大部分网页显示就会正
常了。

【珍藏版】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依次排列。

IE各个版本css兼容

body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-dev源自ce-pixel-ratio:0)
<style type="text/css">
</style>
<![endif]-->

使用 CSS 解析器 Hacks 区分 IE
虽说 IE 条件注释十分简单好用，但是如果你想把全部的 CSS 放到一个文件里的话，那么你不得不使用别的方法。注意这里的 IE 7 Hack将只对 IE7 有效，因为 IE6 根本不知道 > 选择符。同时你也得注意 > 选择符对于其他浏览器同样是无效的。
/* IE 7 */
html > body #ie7
{*display: block;}
/* IE 6 */
body #ie6
{_display: block;}
CSS Hack 区分 Firefox
第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz 只对 Firefox有效，使用这个 Hack 大可不必担心其他浏览器的影响。

IE8不兼容问题彻底解决办法

IE8不兼容问题彻底解决办法网站与IE8不兼容怎么办？为什么不兼容性为什么微软IE8发布后，要求网站去做兼容了，要回答这个问题，我们就必须看看微软IE的发展历程，就不难明白其中的原因。

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了统治地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。

到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。

而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

这个时候就必需想办法使得旧有的网站能够兼容，保证这些网站能够得到正确的显示结果。

作为一般的用户，在查看某个网站时候，发现当前的页面有了不兼容的情况产生时，可以鼠标轻轻的点击地址栏右边的兼容性视图切换按钮，则可以在兼容性模式下查看当前网页。

如果不想这么麻烦，可以直接打开“工具”—“兼容性视图设置”对话框，把本地IE8浏览器设置为“使用兼容模式来查看所有网站”，那么这个时候你访问网站的时候，都可以在兼容模式下显示站点内容了。

从网站的角度看来，必需要自身做到兼容，使得那些采用IE8标准模式来查看网站的用户也能够得到正确的显示结果，通过在网站中做一些设置，使得客户查看你的网站时候，能够自动以兼容模式显示。

第一种办法，是在单个的页面中，添加兼容性标记，程序代码如下：<html><head><title>我的网页</title><meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7"/></head><body><p>内容在此处。

CSS样式在浏览器常见的兼容问题及解决办法

，ie7、ff不支持。
16.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你
给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
17.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具
之间加上
< #div class="clear">
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在
嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：
.clear{clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性
前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。
9.img下的留白，大家看这段代码有啥问题：
<div>
<img src=”” mce_src=”” />
</div>
把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写
<div>
<img src=”” mce_src=”” /></div>

Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表1. 此汇总表中测试浏览器的版本为：微软系统自带：IE6、 IE7、IE8火狐：Firefox 3.6.6Safari：Safari 5.0谷歌浏览器：Chrome 6.0.458.1 devOpera浏览器：Opera 10.602. 其中，多数CSS hack是在selector{property:value;}基础上更改的。

selector代表CSS选择器，property代表CSS特性，value代表特性的值。

3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera4. Q代表Quirks Mode，S代表Standards Mode。

5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。

1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。

CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。

切莫一有兼容性问题就使用，时刻记得改掉用CSS hack修补的问题。

IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例1.区别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等)。

CSS在不同版本IE中的兼容

选择器与继承子选择器示例body > p {color:#fff;}描述子选择器选择一个特定父级元素的所有直接子级元素，在上面的例子中，body是父元素，p是子元素。

支持情况IE6NoIE7YesIE8YesBugsIE7中，如果在父级标签和子级标签之间有一个HTML注释，子选择器将不会工作。

链类示例.class1.class2.class3{background:#fff;}描述链类用于送一个HTML元素有多个class声明的情况，就像这样：<divclass="class1 class2 class3"><p>Content here.</p></div>支持情况IE6NoIE7YesIE8YesBugsIE6好像支持这种情况，因为它能匹配链中的最后一个class到使用该class的元素上，然而，它并不能限制一个使用链中所有class的元素。

属性选择器示例a[href]{color:#0f0;}描述该选择器允许一个元素被定位只要它有指定的属性。

在上面的例子中，所有的带有href 属性的a标签都会被限定，而没有href属性的a标签不会被限定。

支持情况IE6NoIE7YesIE8Yes临近兄弟选择器示例h1+p {color:#f00;}描述该选择器定位临近到指定元素的兄弟标签。

上面的例子将会限定p标签，但是他必须是h1标签的兄弟而且要直接尾随在h1标签的后面。

比如：<h1>heading</h1><p>Content here.</p><p>Content here.</p>在上面的代码中，CSS样式将只对第一个p有效。

因为它是h1的兄弟而且紧跟着h1。

第二个p也是h1的一个兄弟，但是它没有紧跟着h1。

支持情况IE6NoIE7YesIE8YesBugs在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。

ie6、7、8、火狐浏览器兼容性

解决IE7、IE8样式不兼容问题
方法:要在页面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。
注：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想Байду номын сангаас的页面效果。
IE6 IE7 FF
_ √ × ×
* √ √ ×
!important × √ √
----------------------------------------
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
<meta http-equiv="x-ua-compatible" content="ie=7" />

CSS多浏览器兼容性问题及解决方案

CSS多浏览器兼容性问题及解决方案CSS多浏览器兼容性问题及解决方案兼容性处理要点1、DOCTYPE影响CSS处理2、FF:设置padding后，div会增加height和width，但IE不会，故需要用!important多设一个height和width3、FF:支持!important，IE则忽略，可用!important为FF特别设置样式4、div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

缺点是要控制内容不要换行5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。

所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;浏览器差异1、ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效。

[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none 才能去除列表编号或圆点。

也就是说，在IE中仅仅设置margin:0px 即可达到最终效果，而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。

遇到的兼容问题及解决方法

一些常见的兼容问题1.当一些页面在ie7以上可以显示正常，在ie6下出现排版乱，左右不齐时先检查每一个div所对应的是否正确，有没有漏写或者是多写，修改以后如果还有乱版，继续检查左右浮动是否一致，必要时要清除浮动，再一个就是设置的宽高问题，以及margin问题，有时候错1px就会出现排版乱，所以在做网页的时候要仔细认真，仔细查看自己的代码，把基本的错误找出来并改正，兼容问题基本就解决了一大半，2.对于背景图在ie6下不显示的问题：第一，可能是图片所放的那个div层的宽高度（这个必须要设置）设置的比图片小，就会显示不出来第二，也有可能是图片后面没有设置位置，也有可能显示不出来，3.背景图也可以居中：background-position:center;4.遇见需要用展示的效果时，可以用ul li，一个内容里的东西多，而且需要两边都要靠边的，就用div吧，还是挺好用的，但是如果考虑到后台循环的话，还是用一个ul 这样的话方便后台人员往里面加东西，5.*:focus {outline: none} 这个是消除输入框边上的黄线，如果想单独去掉某个输入框，就加个类，eg: .abc:focus{ outline:none }6.设置半透明的效果filter:alpha(Opacity=60);-moz-opacity:0.6;opacity:0.6<style>.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px} .div-b{ background:#000;width:200px;height:100px;paddi ng:5px;color:#F00;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6}/* CSS注释说明：这里对CSS代码换行是为了让代码在此我要中显示完整，换行后CSS效果不受影响 */</style><div class=div-a><div class=div-b>实现DIV半透明实例演示</div></div>7.关于在IE9下字体无效不居中的问题1，将中文字体汉字转换为Unicode编码“黑体”对应Unicode编码为“\9ED1\4F53”“宋体”对应Unicode编码为“\5B8B\4F53”“仿宋”对应Unicode编码为“\4EFF\5B8B”“微软雅黑”对应Unicode编码为“\5FAE\8F6F\96C5\9ED1”将汉字转换为Unicode编码的字符，即成功设置相应字体，又兼容IE9浏览器支持垂直居中line-height样式。

css样式兼容不同浏览器问题解决办法

css样式兼容不同浏览器问题解决办法在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7、FF 共用height: 100px !important;一、CSS HACK1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)以下为引用的内容：2, IE6/IE7对FireFox以下为引用的内容：*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽.以下为引用的内容：三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 如width:115px !important;width:120px;padding:5px;必须注意的是，!important; 一定要在前面。

2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-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.兼容代码:兼容最推荐的模式。

IE6的兼容问题

16、3像素间距bug
在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px
17、IE下z-index的bug



缺点是在IE浏览器下可能会增加额外的HTTP请求数。
2、CSS选择器区分
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。
复制代码
代码如下:
/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
解决方法：将行元素置于块元素内的文字前
12、position下的left，bottom错位
解决方法：为父级(relative层)设置宽高或添加*zoom:1
13、子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative

网页错位原因解决方法

网页错位原因解决方法
不时我们会碰到咱们要配置在一行呈现的组织，却由于种种缘故原由组成为了错位，看到究竟是在一行的着末一个盒子布局错位掉上去了（下
列图）。

错位一 3错位凋零与1和2下方错位二网页组织错位树范
形成DIV CSS网页结构错位的原由大概有两种环境，一种是宽度计算差迟，一种是IE BUG造成，额外是IE6与IE7。

今后我们挨着为各
人简介错位与方案错位法子。

一、宽度计算纰谬决定方法
宽度计算差错，假设总宽度为500px，有3个盒子，划分css宽度为200px、200px、100px，这个没标题可能在一排闪现不会错位，但
若退出了css边框、padding、margin属性时，别忘记这几个属性所
第1页共3页。

(十年积累)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; 然后插入文字，就垂直居中了。

IE6~IE8常见的兼容性问题

IE6 IE7 IE8 的兼容问题一、Bootstrap主流框架的兼容由于IE8以前的浏览器都不支持Bootstrap所以现在列出解决方法:首先需要确保你的HTML页面开始部分要有DOCTYPE声明。

DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes 、properties的约束规则对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析DOCTYPE是非常关键的,目前的最佳实践就是在HTML文档的首行键入:<!DOCTYPE html>大神的帖子总结的bootstrap的查找原因好几条,首先,Bootstrap3 是移动设备优先的原则开发的,所以原因可能如下:1.没有正确调用远程地址即只要是IE9以下,就调用两个专门的js但是我测试发现仅仅使用以上js文件不可行,2.调用方法不正确不要用file://或@import形式引用respond.min.js或respond.js或CSS文件3.针对浏览器的内容做标识(使用meta标签调节浏览器的渲染方式) bootstrap 不支持IE兼容模式,为了让IE浏览器运行最新的渲染模式,将添加以下标签在页面中<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以让用户的浏览器外观依然是IE 的菜单和界面,但用户在浏览网页时,实际上使用的是Chrome浏览器内核),那么就用Chrome内核来渲染。

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

ie6,ie7,ie8 css bug兼容解决记录发表于2010/12/07由前端开发-武方博 8,424 views断断续续的在开发过程中收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！1：li边距“无故”增加任何事情都是有原因的，li边距也不例外。

先描述一下具体状况：有些时候li边距会突然增加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引起，padd ing的上下值对li有影响，左右无影响。

所以只好笨手笨脚地把padding去掉，换成margi n。

这是能解决问题，但往往不是我们想要的结果，或许还会引起其他不必要的怪现象。

现在终于发现解决这个问题的方法，其实很简单，既然是有ul引起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只针对IE6/IE7有效，其他浏览器并不渲染这个属性。

2：分页数字字体用“Arial”加粗不抖动<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"/><title>无标题文档</title><link href="css/style.css"rel="stylesheet"type="text/css"/><style type="text/css">body, ul, h1 {font-family:Arial;font-size:12px;}.page {text-align:center;}.page a {display:inline-block;padding:5px 8px;text-decoration:none;border:1px solid #09F;background-color:#0CF;color:#FFF;}.page a:hover, .page .selected {border:1px solid #CCC;background-color:#FFF;color:#000;font-weight:bold;}</style></head><body><h1>分页样式</h1><div class="page"> <a href="#">1</a> <a href="#"class="selected">2</a> <a href= "#">3</a> <a href="#">4</a> <a href="#">5</a><a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> < a href="#">10</a> </div></body></html>3：IE6 CSS选择器区分IE6IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

/*IE6 专用 */.content {color:red;}/* 其他浏览器 */div>p .content {color:blue;}4：IE6最小高度IE6 不支持min-height属性，但它却认为height就是最小高度。

解决方法：使用ie6不支持但其余浏览器支持的属性!important。

#container{min-height:200px; height:auto !important; height:200px;}5：IE6100% 高度在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

6：IE6躲猫猫bug在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。

一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;7:IE6绝对定位元素的1像素间距bugIE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。

唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

8: IE下z-index的bug在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。

解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

9: Overflow Bug在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。

解决方法就是给外包容器.wrap加上position:relative;。

10: 横向列表宽度bug如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayou t，在IE6下就会有错误的表现。

解决方法很简单，只需要给<a>定义同样的float:left;即可。

11: 列表阶梯bug列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。

解决办法就是给<li>定义float:left;而非子元素<a>，或者给<li>定义display:inline;也可以解决。

12: 垂直列表间隙bug当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。

解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的has Layout（如定义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

13: IE6调整窗口大小的 Bug当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。

解决办法：给body定义position:relative;就行了。

14: 文本重复Bug在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。

解决办法：给浮动元素添加display:inline;。

15：链接a的title属性中的文字换行啥也不说，先上个图我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的文字，常常用来加一些提示语句，比如说点击查看详情之类的，代码形如：<a href=”#”title=”点击查看详情”>链接xx</a>。

之前一直没有仔细注意过这个东西。

如果鼠标浮动上去要显示更多东西的话，怎么实现呢。

第一反应是jquery的tooltip插件。

今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的，找了下，没发现有Javasc ript脚本，再往链接的地方一看，终于让我发现了门道了：<a href='#' target="_blank" title="标题: 关于对我校2006年至2009年发展党员工作情况进…发布日期: 2010-5-31 16:05:08 类别：院务通知点击: 139">[05-31] 关于对我校2006年至2009年发展党员工作情况进…</a>注意到了吗。

很简单，只要使用这样的转义符号,即可实现换行。

在一些tooltip要求定制性不高的情况下，这样的显示效果相当不错，而且是浏览器原生的效果，安逸。

哎，虽然号称精通div+css，但是发现一些小小但是很实用的技巧自己还不知道，看来htm l还有很多东西可以挖掘。

16：如何去掉点击链接时的虚线解决方案1：在<a href="/wangfengteacher"onFocus="this.blur()> Mi ke blog</a>解决方案2：在标签中加入 hidefocus<a href="/wangfengteacher"hid efocus> Mike blog</a>解决方案3: 如果连接太多，可以用外部链接 .HTC 文件。