ie8不好用(ie8好用还是ie9好用)

编程之家2024-05-21103次浏览

一、ie9 ie10 ie11哪个好

1、Windows每次只能拥有一个 IE版本，安装新版的 IE后，旧版的 IE就将被取代，不同版本的 IE无法在 Windows中共存（当然绿色版除外）；

2、Windows只能升级安装或重新安装比现有版本高的 IE版本，不能运行比现有版本低的 IE安装程序；

3、Windows都拥有一个系统内置的默认版本 IE，例如 IE8 for Windows 7。如果所有其它版本的 IE均被卸载，Windows就将恢复内置的 IE默认版本。默认版本的 IE无法单独卸载（只能通过“打开或关闭

Windows功能”表面上禁用），也无法单独重新安装。

在明确了这些传统习惯之后我们来看一下 Windows 7的情况。Windows 7内置的 IE默认版本是 IE8，可以升级安装为 IE9或 IE10。IE10安装程序只要求 Windows 7具有 SP1，但不要求必须安装 IE9。

因此我们既可以在没有安装 IE9的 Windows 7中直接将 IE8升级为 IE10，也可以在已经安装 IE9的 Windows 7中升级为 IE10。

于是，在 Windows 7中安装 IE10后，如果需要卸载 IE10，可能会遇到如下情况：

如果以前未安装过 IE9，IE10从 IE8直接升级而来：

在 Windows 7中安装 IE10后，控制面板中的“打开或关闭 Windows功能”－“已安装的更新”列表将显示 IE10的卸载选项，执行此卸载可以自动回滚至安装 IE10之前的 IE8。但是，这个 IE10的卸载选项不能回滚至 IE9，因为我们此前并没有安装过 IE9。IE9在已安装 IE10的情况下也不能直接安装。因此如果我们希望回滚至 IE9，只能先卸载 IE10恢复 IE8，然后再安装 IE9。

如果以前安装过 IE9，IE10从 IE9升级而来：

如果以前曾经为 Windows 7安装过 IE9，那么在“已安装的更新”列表中原本就应该有一个 IE9的卸载选项。在此基础上安装 IE10后，“已安装的更新”列表将不再显示 IE9卸载选项，而是只显示 IE10的卸载选项。不过此时 IE9的卸载选项虽然不再可见，但却依然存在。如果我们选择卸载 IE10，Windows 7将回滚至 IE9而不是 IE8，卸载 IE10后 IE9的卸载选项也将重新出现在“已安装的更新”列表中。换言之 Windows 7始终只显示一个可选的 IE卸载选项。如果我们首先安装 IE9再安装 IE10，然后希望回滚至默认版本 IE8，必须卸载两次才能实现。

二、ie6 ie7 ie8 ie9和FireFox Chrome中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和 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”/divdiv id=”floatB”/divdiv id=”NOTfloatC”/div这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 div class=”floatB”/divdiv 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"";二、万能 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三、其他兼容技巧1, FF下给 div设置 padding后会导致 width和 height增加,但IE不会.(可用!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. 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- width:500px;//for ff+ie6.0}#box{ width:600px!important//for ff width:600px;//for ff+ie6.0 width/**/: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; IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}htmlbody#box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 6页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个div放到body标签下，然后为div指定一个类：然后CSS这样设计：#container{ min-width: 600px; width:expression(document.body.clientWidth 600?"600px":"auto");}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 7清除浮动.hackbox{ display:table;//将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content:"."; display: block; height: 0; clear: both; visibility: hidden;} 8 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html#left{ margin-right:-3px;//这句是关键}HTML代码div id="box" div id="left"/div div id="right"/div/div 9属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 11高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin或paddign时。例： div id="box"pp对象中的内容/p/divCSS：#box{background-color:#eee;}#box p{margin-top: 20px;margin-bottom: 20px; text-align:center;}解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。/*IE与Firefox的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可以同时在 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; 10.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：） 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*/} div+css兼容（二） DIV+CSS兼容 IE6 IE7火狐在区别火狐和IE时最常用的是!important方法,对于其他不同浏览器和浏览器的不同版本的的兼容性问题还有下面一些方法,比如:@import,注释,属性选择符,子对象选择符和voice-family等方法,这些方法在《css网站布局实录》中有讲述.下面是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特别设置样式

三、win7 ie8和ie11哪个好