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

合集下载

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

如何解决同时使用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了。

ie6 ie7 ie8 ff(火狐)浏览器兼容性

ie6 ie7 ie8 ff(火狐)浏览器兼容性

<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->
<!--[if ie 7]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<!--[if IE 8]>不错不错,挺先进的嘛,使用IE8呢!文字是褐色的。<![endif]-->
<!--[if IE 7]>你,IE7,红色文字!<![endif]-->
<!--[if IE 6]>孩子,虽然显示的是绿色文字,不过,IE6可不是好东西呢!<![endif]-->
</p>
+color:red; // IE7
_color:green; // IE6
}
HTML 代碼:
<body style="width:500px;margin:0 auto;">
<p clபைடு நூலகம்ss="ie">
<span style="display:block;display:none\9;">嘿嘿,小子竟然也用Firefox,蓝色文字。</span>
<![endif]-->
<!--[if ie 8]>
<style>

IE6~IE8常见的兼容性问题

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<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><scriptsrc=""></script><script src=""></sc ript><![endif]-->但是我测试发现仅仅使用以上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内核来渲染。

解决IE6兼容性问题的十一大技巧

解决IE6兼容性问题的十一大技巧

11 要点解决 IE6 兼容性问题 1、使用声明 你必须经常在 html 网页头部放置一个声明,推荐使用严格的标准。

例如 <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN” "/TR/html4/s trict.dtd”> or,forXHTML: <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN” " /TR/xhtml1/DTD/xhtml1-strict.dtd”> 最后你需要是 IE6 进入兼容模式,这已经足够兼容了。

2、使用 position:relative IE6 兼容性问题解决方案二:使用 position:relative。

设置一个标签 position:relative 可以解 决很多问题,特别是曾经有过看不见的经历或者奇怪布局的框架。

明显的,你需要小心,绝 对位置放置的子元素是否都参照找到新位置。

3、为浮动元素使用 display:inline 浮动元素会有一个著名的 IE6 双边距 marginbug。

假如你设置了左边距 5px 但实际上得到 了 10px 左边距。

display:inline 可以解决这个问题,尽管它不是必需的, 但是 css 仍然有效。

4、设置元素启动 hasLayout 大部分 IE6(IE7)的渲染问题都可以通过起来元素的 hasLayout 属性来兼容。

这是 IE 内置 的设定, 确定一个内容块相对其它内容块是有界限和位置的。

当你需要设置一个行内元素例 如一个连接变成块状元素或者是透明效果,设置 hasLayout 也是必须的。

5、修复重复字符的 bug 复杂的布局会触发一个 bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。

这里 有几种解决的办法,部分是理想的,并且一些测试和出错是必须的。

a、确保浮动元素都使用:display:inline; b、最后一个浮动元素使用 margin-right:-3px; c、在浮动对象最后一个元素后使用一个条件注释。

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

课题_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><!--CSS兼容IE6 IE7 IE8 IE9 Firefox的总结--><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>。

ie6ie7ie脚本兼容资料

ie6ie7ie脚本兼容资料

IE6,IE7浏览器兼容性问题总结(1)浏览器兼容性问题一直是比较棘手的问题,往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决,这里对IE6,IE7浏览器兼容性问题作一下总结。

本节向大家描述一下IE6,IE7浏览器兼容性问题总结,主要从十四特殊情况来向大家讲解,比如文字本身的大小不兼容,Firefox下容器高度限定,横向上的撑破容器问题,相信本文介绍一定会让你有所收获。

IE6,IE7浏览器兼容性问题总结其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决。

下面是14条特殊情况仅供参考:1.文字本身的大小不兼容。

同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,IE下实际占高16px,下留白3px,Firefox下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。

解决方案:给文字设定line-height。

确保所有文字都有默认的line-height值。

这点很重要,在高度上我们不能容忍1px的差异。

2.Firefox下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而IE下是会被内容撑大,高度限定失效。

所以不要轻易给容器定义height。

3.横向上的撑破容器问题,。

如果float容器未定义宽度,Firefox下内容会尽可能撑开容器宽度,IE下则会优先考虑内容折行。

故,内容可能撑破的浮动容器需要定义width。

小实验:有兴趣大家可以看看这段实验。

在不同浏览器下分别测试以下各项代码。

a.<divstyledivstyle=”border:1pxsolidred;height:10px”></div>b.<divstyledivstyle=”border:1pxsolidred;width:10px”></div>c.<divstyledivstyle=”border:1pxsolidred;float:left”></div>d.<divstyledivstyle=”border:1pxsolidred;overflow:hidden”></div> 上面的代码在不同浏览器中是不一样的,实验起源于对小height值div的运用,<divstyle=”height:10px;overflow:hidden”></div>,小height 值要配合overflow:hidden一起使用。

史上最全IE6.IE7.IE9.IE10.谷哥.火狐各浏览器网页兼容性介绍总结

史上最全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>后面,多余的字也同样消失,页面正常显示。

IE6-IE9兼容性问题列表及解决办法总结

IE6-IE9兼容性问题列表及解决办法总结

IE6-IE9兼容性问题列表及解决办法总结目录如下:概述第一章:HTML. 3第一节:IE7-IE8更新 (3)1.如果缺少结束标记的 P 元素后跟 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素,会自动添加结束标记。

(3)2.支持格式正确的有效标记,不再支持格式错误的 HTML。

.. 4第二节: IE8-IE9更新. 51.表对象模式现在更加符合其他浏览器。

(5)2.文本布局使用自然度量而不是图形设备接口 (GDI) 度量。

(7)第二章:CSS. 9第一节:IE6-IE7更新 (9)1.方框模型溢出内容现与方框相交,不再让方框自动增长适应内容。

(9)2.不再支持某些 CSS 筛选器(如 *HTML、_underscore 和 /**/ 注释)。

(11)3.已解决SELECT 元素不能被div覆盖的问题。

(14)第二节:IE7-IE8更新 (14)1.不再支持 CSS 表达式,改为支持增强的 CSS 或 DHTML 逻辑。

(14)2.currentStyle 对象的Unset属性现在返回其初始值。

(15)3.style 对象的 Unset 属性值现在返回空字符串。

(16)第三节:IE8-IE9更新 (17)1.泰语和东亚语文本和字体大小的显示可能小于其他字样。

(17)2.某些行为连接方法在 XML 模式中不可用。

(18)第三章:Javascript and DOM.. 19第一节:IE6-IE7更新 191.不再允许用于绕过 window.close 提示的 window.opener 技巧。

(19)2.从脚本创建的模式或无模式对话框看起来似乎稍微变大。

(20)第二节:IE7-IE8更新 (20)1.支持“class”语法,不再支持“className”属性语法。

(20)2.属性集合不再包含 Internet Explorer 可识别的所有可能属性。

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

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

一些常见的兼容问题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样式。

浏览器兼容总结

浏览器兼容总结

浏览器兼容总结浏览器兼容性是指网页在不同的浏览器中正常显示和工作的能力。

由于不同浏览器对网页技术的支持程度不同,开发人员经常需要解决浏览器兼容性问题,以确保网页在各种浏览器中都能够正确地呈现。

浏览器兼容性问题主要涉及到HTML、CSS和JavaScript技术。

在不同的浏览器中,对HTML元素的解析、CSS样式的渲染和JavaScript代码的执行可能会存在差异。

以下是一些常见的浏览器兼容性问题和解决方法:1. HTML兼容性问题:- 不同浏览器对HTML5新元素的支持程度不同。

可以使用JavaScript或CSS的替代方案来解决这个问题,例如使用JavaScript创建新元素,或者使用CSS进行布局和样式控制。

- 不同浏览器对HTML标签嵌套的要求不同。

需要遵循HTML规范来确保嵌套正确。

2. CSS兼容性问题:- 不同浏览器对CSS属性的支持和解析方式不同。

可以使用CSS前缀自动添加工具来解决这个问题,例如Autoprefixer。

- 不同浏览器对标准CSS布局(如弹性布局和网格布局)的支持程度不同。

可以使用JavaScript库或Polyfill来提供对这些布局的支持,例如Flexbox和Grid布局的Polyfill。

3. JavaScript兼容性问题:- 不同浏览器对ES6+新语法和API的支持程度不同。

可以使用Babel等工具将新语法转换为ES5语法,或者使用Polyfill来提供对新API的支持。

- 不同浏览器对JavaScript引擎的性能和特性支持不同。

需要避免使用过多的循环和递归,以及对性能敏感的操作,以确保在各种浏览器中都有良好的性能。

除了以上的技术层面的兼容性问题,还有一些其他的兼容性考虑:1. 浏览器版本兼容性:- 不同浏览器版本对技术支持的程度也可能不同。

开发人员需要根据用户数据统计和市场占有率等信息,确定需要支持的浏览器版本范围。

2. 移动端兼容性:- 移动设备上的浏览器和桌面浏览器之间也存在兼容性差异。

浏览器兼容性问题总结

浏览器兼容性问题总结

浏览器兼容性问题总结浏览器兼容性问题总结浏览器兼容性问题是指不同的浏览器在解析和渲染网页时可能出现的差异和问题。

由于不同浏览器厂商对网页标准的理解和实现不同,因此在开发和设计网页时需要考虑不同浏览器可能存在的兼容性问题。

下面将对浏览器兼容性问题进行综述。

1. 标准支持差异不同浏览器对网页标准(如HTML、CSS和JavaScript)的支持程度存在差异。

有些浏览器可能支持新的HTML5和CSS3特性,而另一些可能不支持或支持的不完全。

这导致在开发网页时需要根据目标浏览器的兼容性情况调整代码,以确保在不同浏览器中都能正确显示。

2. 排版和布局差异不同浏览器对网页元素的排版和布局有不同的解析方式和默认样式。

这可能导致在不同浏览器中显示的页面布局不一致,元素间的间距和大小可能有所差异。

为了解决这个问题,开发者需要使用CSS重置样式或使用浏览器特定的样式前缀来确保在不同浏览器中保持一致的布局。

3. JavaScript兼容性不同浏览器对JavaScript的支持程度也存在差异。

一些浏览器可能支持新的JavaScript特性和API,而另一些浏览器可能仅支持较旧的版本。

这可能导致在使用新特性时出现错误或页面无法正常工作。

为了解决这个问题,开发者需要对目标浏览器进行兼容性测试,使用polyfill或其他替代方案来实现跨浏览器兼容性。

4. 图片和多媒体兼容性不同浏览器对图片和多媒体格式的支持也存在差异。

一些浏览器可能支持新的图片格式(如WebP),而另一些可能不支持。

此外,浏览器对视频和音频的编解码支持也可能存在差异。

为了确保在不同浏览器中正常显示图片和多媒体内容,开发者需要提供多种格式的备选方案,并使用HTML5的元素来实现在不同浏览器中的兼容性。

5. 响应式设计兼容性响应式设计是一种适应不同屏幕尺寸和设备的设计方法。

由于不同浏览器的窗口大小和设备特性不同,因此在不同浏览器中实现响应式设计时可能存在兼容性问题。

浏览器兼容性问题总结

浏览器兼容性问题总结

浏览器兼容性问题总结
引言
在开发网站或应用程序时,我们经常会面临不同浏览器之间的兼容性问题。

由于不同浏览器厂商在解析HTML、CSS和JavaScript的方式上存在差异,网页在不同浏览器上可能会显示不同。

兼容性问题可能导致页面布局错乱、功能无法正常运行,给用户带来不好的体验。

本文将讨论一些常见的浏览器兼容性问题,并提供相应的解决方案。

1. 盒模型差异
不同浏览器在解释盒模型上存在差异,这可能导致元素的尺寸计算不一致。

有两种盒模型:W3C 盒模型和 IE 盒模型。

W3C 盒模型:width 和 height 属性表示内容区域(不包括边框和内边距)的宽度和高度。

IE 盒模型:width 和 height 属性表示内容区域 + 内边距 + 边框的总宽度和高度。

解决方案:使用 CSS 盒模型属性box-sizing: border-box;,确保在不同浏览器上的一致性。

.example {
box-sizing: border-box;
}
2. 浮动布局问题
在使用浮动布局时,可能会遇到一些问题,特别是对于容器的尺寸计算和清除浮动。

浮动元素会脱离正常文档流,可能导致父元素的高度塌陷,影响后续元素的布局。

解决方案:可以通过在容器末尾添加一个空的清除浮动元素,或者使用 CSS 清除浮动的技巧。

```css .clearfix::after { content:。

IE6兼容性详解

IE6兼容性详解

IE6兼容性大全相信从事前端开发的朋友对IE6都是深恶痛绝,恨不得先杀后J,然后再大卸八块以解心头只恨。

虽然是这么可恶的一个浏览器,但是IE6迄今为止的市场占有率仍然很高,截止2009年8月份的市场占有率仍然有25%之多。

那么今天创意灵犀通过翻译国外的译文对IE6的兼容问题进行总结概括。

难免有疏漏之处,如若您有更好的建议,欢迎在回复中提出,我会及时加以补充。

1.前言:考虑浏览器的兼容性,我们要做的首先一定要简洁,如果你的布局太复杂,兼容性就更加难以做到。

其次,我们要实用合适的文档声明,因为没有声明的情况下,IE6会出现很多怪异的问题。

W3CSCHOOL指出,XHTML1.0中文档声明包括以下三种:Frameset(框架型)、Transitional(过渡型)、Strict(严格型)。

而loose为HTML4.01的类型,并非XHTML的类型。

我们最常用的通常是过渡型,示例代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">第三,当我们完成制作的时候要记得验证我们的代码,有些人认为校验代码没有任何实用价值,但我不这么认为。

校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅IE6;验证确保了向后兼容并且易于维护。

至少也得验证XHTML!第四,实用渐进增强,即在适当的时候保留一些不兼容浏览器的基本功能,至少不影响用户体验到网站要表现的内容。

最后是如何测试我们的网站,在FF下我们可以使用功能强大的Firebug,可以方便的对网站的CSS及网站结构进行精确快速的运行时查看,甚至对JS设置断点。

而IE下我们的工具相对较为贫乏,但是我们可以使用IETester来测试不同IE版本的显示效果,IETester的开发者也提供了DebugBar这款IE插件免费供个人使用,但商业用户只可试用60天。

处理网站兼容问题的几大秘诀

处理网站兼容问题的几大秘诀

处理网站兼容问题的几大秘诀网站兼容问题一直是让网站开发人员最为头痛的事这一,有时候甚至一个对齐问题都是处理半天时间,有时候好不容易处理好了IE6下的兼容,但IE8下的又不行了,有时候IE下的全部OK了,就在高兴的时候,突然传过来说,“邹工,那个什么在火狐下没有反应~”!!我想说,,我可以说脏话吗?不可以的话那我真是无话可说了,,我在想,干嘛弄出那么多个浏览器呢,IE 自家的浏览器为什么升级不自己兼容自己的东西呢~~我真的无力吐嘈了~~可能很多网站开发人员也有过我这想法吧?如吧,,我不再抱怨了,最终还是要解决这些问题的~~~那我是一般是怎么处理网站兼容问题的呢?1,作为我一名程序员来说,遇到任何问题一定是先找出原因首先弄清楚是在什么版本的浏览器出现的问题,因为一般客户不知道是IE 几,只知道名字,通常用的是IE,那我们只能根据这个去作为线索去解决问题了2,工具要齐全,程序员来说工具是最好的帮手!有一个好的工具能帮助你省不少的事!一般来说我用的是IETest这个工具,可以在里面自动加载IE各个版本,然后网站开发人员要大概的了解各个浏览器的内核,一般来说像搜狗浏览器调用的就是IE的内核,其它的浏览器基本上你在百度上搜索下就知道了3,到这里应该要知道是哪种内核版本引起的问题,就可以开始对症下药了!一般来说如果在IE6下出现的问题较多,基本有这几个,1)再IE6下所有样式都不起作用,这种一般是没有引用到样式文件,或者是样式文件出现了问题,可以用删除法排除,把样式文件打开,将样式删除一部分然后再看页面是否是已经有了 2)浮动引起的,有时候页面底部的东西盖住了页面上面的内容或者底部的内容漂到了右边,这一般都是没有清除浮动引起的,一般加上clear:both就能解决这个问题。

基本上很多问题都是跟浮动相关的了,在这里我经常用的办法就是用删除法,先找到是哪个样式引起的问题,然后解决问题!这里我介绍几个常用的方法!用符号_ 用来针对IE6的样式,如_width:200px则在IE6下宽度为200像素,*针对IE6和IE7,9针对所有IE版本然后样式也有先后的,比如width:200px;_width:190px;和_width:190px;width:200px;是不同的,前面是在所有浏览器中宽度是200,而在IE6下是190,后才则是所有浏览器都是 200,而那个在IE6下的190就不起作用了!其实解决兼容问题没有多复杂和多难,方法其实就是这么些,关键看怎么灵活运用,今天能想起来的就这些,希望能帮助到网站开发人员,特别是前台制作人员!一切问题都是方法问题!技巧只是辅助,方法才是关键!!文章来源于:/article-25004-1.html。

IE6的兼容问题

IE6的兼容问题

16、3像素间距bug
在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px
17、IE下z-index的bug
<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中加载css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺点是在IE浏览器下可能会增加额外的HTTP请求数。
2、CSS选择器区分
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
复制代码
代码如下:
/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
解决方法:将行元素置于块元素内的文字前
12、position下的left,bottom错位
解决方法:为父级(relative层)设置宽高或添加*zoom:1
13、子级中有设置position,则父级overflow失效
解决方法:为父级设置position:relative

EasyUI 兼容 IE6 方法总结

EasyUI 兼容 IE6 方法总结

bobox 如果单选,multiple必须也设置为true。

这个ie7如果没设置,会保持多选状态,算是一个bug。

bobox 最好用js来渲染,而不是一开始就class=“easyui-combobox”,这样可以提高效率,当然其他控件也是如此。

3.ie6下datebox和datetimebox渲染确实挺慢,还是my97datepicker比较好。

4.闪烁的问题,可以先用遮罩造成假象来提高用户体验。

5.注意逗号,datagrid 在ie6下多个逗号就会报脚本错误,而其他浏览器经常会忽略逗号。

6.datagrid分页控件自定义按钮解析成href=“javascript:void(0)”,会引起脚本不执行。

可以换方式实现。

7.用jquery的easyui的dialog组件,加上了bgiframe插件,dialog的内容可以不被遮盖,但边框还是被select遮盖,而jqueryui的dialog就不会出现这个问题。

主要原因是,easyui的dialog组件比jqueryui中的dialog外层多套了一层div,只需要找到dialog的上一级标签,在加上bgiframe就不会出现边框被遮盖的问题了。

$(‘#div_id”).parent().bgiframe();8.easyui 在datagrid中添加JS跳转没反应Js代码function tourl(url){location.href=url;window.event.returnValue = false;}9.according ie6滚动条丢失。

方法一:设置DOCTYPE 为<!DOCTYPE html>方法二:将accordion 的animate 属性设为false10.分页闪烁你使用的浏览器应该是ie6,这是因为pagination中选择分页大小使用的是select,这正是造成闪烁的原因。

可以将选择分页大小的选项禁用:$.fn.pagination.defaults.showpagelist = false;yout最好别让他收缩。

ie工作总结范文

ie工作总结范文

ie工作总结范文
IE工作总结。

在IE(Internet Explorer)工作了一段时间后,我意识到这个工作对于我的职业生涯和个人成长都有着重要的意义。

在这篇文章中,我将总结一下我在IE工作的经验和收获。

首先,我要感谢IE给予我的机会和挑战。

在这里,我学到了很多关于网络浏览器和互联网技术的知识,也提升了我的沟通和团队合作能力。

我有幸参与了一些重要项目的开发和实施,这让我对自己的能力有了更多的信心。

其次,我要说的是IE工作让我更加注重细节和质量。

在这个行业,每一个细节都可能影响用户的体验和产品的成功。

因此,我学会了更加仔细地分析和处理问题,以确保产品的质量和稳定性。

此外,IE工作也让我更加注重用户需求和体验。

在这个快速发展的行业中,用户的需求和喜好也在不断变化。

因此,我们需要不断地调整和改进产品,以满足用户的需求。

在这个过程中,我学会了更加灵活地思考和行动,以适应不断变化的市场。

最后,我要感谢IE的同事和领导。

他们给予了我很多的支持和帮助,让我能够顺利地完成工作并取得进步。

在这里,我结识了很多优秀的人才,也学到了很多宝贵的经验和教训。

总的来说,IE工作对于我来说是一段宝贵的经历。

在这里,我不仅学到了很多专业知识和技能,也培养了自己的工作态度和团队精神。

我相信这段经历将成为我未来职业生涯的宝贵财富,也将影响着我未来的成长和发展。

感谢IE,感谢所有支持和帮助过我的人,我会继续努力,不断进步。

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

文档类型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)也会显示垂直滚动条。

你可以使用overflow:auto,让滚动条只在你需要时出现。

代码:html {overflow: auto;}CSS hack2010年8月20日16:21#select{width:500px; /*DOM*/+width:500px; /*for ie6/7 */_width:500px; /*for ie6 */width:500px !important; /* for not ie6 */使用IE特有条件注释微软给IE添加了条件注释以区分不同版本,任何东西都可以塞进条件注释里:标签、JavaScript、js文件、css、内联样式。

可以使用条件注释来针对某一个IE浏览器版本来编写代码。

规则如下:(译注:可参考IE 特有注释(hack))<p>这段文字会在所有浏览器显示</p><!--[if lte IE 6]><p>这段文字仅显示在 IE6及IE6以下版本。

</p><p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p><![endif]--><!--[if gte IE 6]><p>这段文字仅显示在 IE6及IE6以上版本。

</p><p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p><![endif]--><!--[if gt IE 6]><p>这段文字仅显示在 IE6以上版本(不包含IE6)。

</p><p>This message will only appear in versions of Internet Explorer greater than version 6.</p><![endif]-->使用条件注释加载css的好处是这些样式是独立于其他css文件的,因此不会在编写兼容代码时弄得一团糟;而且当IE6的市场份额降低到不需要兼容时,可以快速的清理掉。

使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数,所以需要权衡是否这样做。

但我不建议使用条件注释加载外部js文件,因为js文件会造成阻滞,在js未加载完之前其余文件都不会被加载;对于js请使用JavaScript程序来区分浏览器而非条件注释。

源文档</w3c/727>横向导航栏标准代码float:left;width:100px;height:40px;li {}display:inline-block;width:...px;height:40px;li a {}<li><a href="#" title="">Menu Item #1</a></li><ul id="menu"></ul>IE6嵌套产生的Bug (多见于列表)1.父块(未设宽度自适应)浮动,子块display:block 设置高度产生Bug (溢出BUG 衍生问题)子块顶穿父块,怀疑为设置高度使子块宽度变为默认的占整行,IE 6中父块浮动收缩时不会使子块默认占整行受影响(DOM 中会)解决办法子块display:inline-block 或加float2.(垂直堆叠bug 衍生)<style type="text/css" >ul {list-style: none;}a {display: block; float: left;background: #99CCFF;}</style><ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>解决:使用最上面的写法IE 6Bug2010年8月19日16:40IE6/7支持水平居中:IE 6/7中,标准模式下可使用margin :0 auto水平居中。

兼容模式下无效。

IE6溢出:IE 6中向下溢出默认会顶开父盒子的高度(如果是英文连续没有空格还会顶开宽度),向上溢出则会被直接隐藏而在IE 7和DOM 中文字会溢出显现但不会影响父盒子IE6下不支持的属性最大最小宽度min/max-width/height 相对于浏览器窗口定位 position:fixed 为非链接元素添加:hoverIE6双倍空白边问题IE 6浮动盒子同父级元素左右两边接触时会跟左右两边产生双倍横向空白边解决方法是个盒子加上display:inline 目前没发现有什么影响空白边合并IE6/7均不支持IE6/7空元素设宽度bug(会占一行高)IE7可设height:0可解决IE 6不行IE6设空元素height:0也会有高度IE6 3像素空白浮动元素紧接着非浮动元素则之间会有三像素空白,需要用CSS hack 设置浮动元素_margin-right:-3px或者浮动元素后最好不要直接跟非浮动元素,尽量清除连续浮动元素,固定宽度接自适应宽度首先,在DOM 中,自适应宽度元素如果占满一整行则浮动(对宽度是100%的元素)不能出现环绕或被环绕效果IE8中先确定宽度后浮动 浮动与浮动元素相接或非浮动元素相接都是标准文本流形式,即不设宽度是宽度设为整行(浮动后需要元素内容多余一行),则会出现,最右边占满一整行的效果IE6/7先浮动后确定宽度如下图所示三像素空白BUG 连续浮动元素相接BUGIE6/7父元素设置overflow 为auto/hidden/scroll 时子元素设置position:relative子元素脱出关于IE6/7垂直堆叠BUG如果非浮动块固定宽度则产生BUG,非浮动块会抬起跟浮动块同级假设浮动块固定大小,如果非浮动块流动宽度则同DOM 相同,浮动块抬起,非浮动块在下面嵌套情况,子浮动元素对父不浮动元素也可见IE6/7共有问题IE6专有问题IE6捉迷藏增加了一层div结构,问题肯定出在这。

相关文档
最新文档