懂科普常见ie8兼容问题怎么写 ie8浏览器兼容性问题怎么解决
- 综合知识
- 关注：1.19W次
方法1、简单方法：通过IE8.0浏览器界面中的“兼容性视图”按钮，重新打开当前地址网页便可
方法2：通过IE8.0浏览器菜单中的“工具”-“兼容性视图设置”来设置兼容的网站。具体方法为点击“工具”-“兼容性视图设置”按钮出现如下图所示的窗口，只要在“添加此网站”中添加要兼容打开的网址，然后点击“添加”按钮后，就会在“已添加到兼容性视图中的网站”中显示出来网址。添加好后，点击“兼容性视图设置”窗口，浏览器便可自动刷新网页并可以正常显示。
2.IE8的兼容问题怎么解决IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定
IE7 Standards Modes :IE7现在用的解析网页的模式，开起机关是在<head>；中加入 <meta ”，现在用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; 5 IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度， 正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 6 页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个 放到 <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代码 9 属性选择器（这个不能算是兼容，是隐藏css的一个bug） p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏，FF和OPera作用 属性选择器和子选择器还是有区别的，子选择器的范围从形式来说缩小了，属性选择器的范围比较大，如p[id]中，所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办。
- 文章版权属于文章作者所有，转载请注明 https://dongkepu.com/zonghezhishi/3ol0z8.html
