文档库 最新最全的文档下载
当前位置:文档库 › ie兼容问题

ie兼容问题

ie兼容问题
ie兼容问题

浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。在下不才,归纳几点html编码要素,望能指点各位:

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定

line-height 。确保所有文字都有默认的line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题,横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。

小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

a.

b.

style=”border:1px solid red;width:10px”>

c.

d.

style=”border:1px solid red;overflow:hidden”>

上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,

,小height 值要配合overflow:hidden一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。

4.浮动的清除,ff下不清除浮动是不行的。

纠正大家一个误区,遇到不兼容就说ff烂是不对的,其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。

5.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

6.mirrormargin bug,当外层元素内有float元素时,外层元素如定义

margin-top:14px,将自动生成margin-bottom:14px。padding也会出现类似问

题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或设定float。

引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。

7.吞吃现象,限于篇幅,我就不展开了。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“ picRotate start ”方法写注释。

9.

  • 里加float
    ,这是一个典型的,棘手的兼容问题,希望引起大家正视,给li 不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑,由于问题的复杂性,将另起一文专门讨论该问题。在《ul

    使用心得》一文里有相关成果,却没给出问题解决的过程。

    10.使用了“float:left;display:inline”的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline,这也是我的css体系里的重要一环,在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止,这里不能多说哈。

    11.img下的留白,大家看这段代码有啥问题:

    把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写

    后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定display:block。

    12.失去line-height。

    文字
    ,很遗憾,在ie6下单行文字line-height 效果消失了。。。,原因是这个inline-block 元素和inline元素写在一起了。解决方案:让img 和文字都float起来。

    引申:大家知道img 的align 有text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都float起来,用margin 调整。

    13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效。

    14.非链接的hover状态。div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

    15.block化的a链接,其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,ff、op下正常。

    想不出来了,以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙,90%的不兼容问题不需要另起css hack的。

    16.无法彻底清除的float。如果让ul下的li具有了float属性,如何clear浮动的li呢?

    或者

    • class=”c”>
    或者

    • class=”c”>
    或者

    class=”c”>
    或者上述的组合?这个问题,我无法给出解答。下面有个例子与此相关

    https://www.wendangku.net/doc/275394112.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd>

    • sfsdfsfdf
    • sfsdfsfdf

    sfsdfsfdf

    请在ie下测试,仅仅将margin-top:19px 改为margin-top:20px 你发现什么了?要素:doctype必须有,ie6、ie7下margin-top:19px还好好的,

    margin-top:20px 就出问题了,无法解释。。。大家还可以将clear 层换不同的位置测试。

    解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)

    引申:clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin 值也会失效

    dd

    ff

    17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

    18.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

    19.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

    20.ie6下的bug,内有的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

    21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。

    系统浏览器设置

    国家公派出国留学管理信息平台 浏览器设置 国家留学基金管理委员会制 2017年4月

    为保证数据准确性,请使用Internet Explorer(以下简称“IE”)浏览器进行评审。开始评审前请对IE浏览器进行以下设置。 一、启用“兼容性视图” 1)打开IE浏览器,点击菜单栏“工具”-->“兼容性视图设置”。 2)打开“兼容性视图设置”窗口,点击“添加”按钮,将https://www.wendangku.net/doc/275394112.html,添 加至兼容性视图网站。 3)确认https://www.wendangku.net/doc/275394112.html,已添加至兼容性视图网站,点击“关闭”按钮,完成

    兼容性设置。 二、关闭“弹出窗口阻止程序” 1)打开IE浏览器,点击菜单栏“工具”-->“Internet选项”。 2)点击“隐私”按钮,进入IE浏览器安全性设置选项卡中。

    3)去除“启用弹出窗口阻止程序”前面的勾,点击“确定”按钮,完成 设置。 三、安装“PDF文件阅读器” 建议安装AdobeReader10.0或以上版本PDF阅读器,安装完成后确认IE浏

    览器“管理加载项”已启用。 1)打开IE浏览器,点击菜单栏“工具”-->“管理加载项”。 2)切换显示“未经许可运行”,确认加载项列表中有Adobe PDF Reader。 按照如上设置,如果申报人材料无法在IE浏览器中预览,可使用以下几种办法进行解决。 (1)关闭迅雷--浏览器下载响应 如果您安装了“迅雷”,请从设置中心中关闭“IE浏览器下载响应”。

    (2)使用系统自带软件解决 如果您是“Windows10”操作系统,卸载Adobe Reader,使用系统自 带Microsoft Edge浏览器预览材料。 (3)安装其他PDF阅读器解决 安装“福昕PDF阅读器”,使用福昕阅读器预览材料。 (4)如果您是“Windows 64位”操作系统,请使用“C:\Program Files (x86)\Internet Explorer\iexplore.exe”32位版本IE浏览器进行 评审。 (5)以上方法都不能问题,请重置“IE浏览器” a)关掉ie浏览器(必须关闭)。 b)运行inetcpl.cpl命令,打开ie浏览器首选项。 c)切换至“高级”选项卡,删除个人设置,还原ie浏览器初始值。

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

    浏览器兼容新问题 W3C对标准的推进,Firefox,Chrome,Safari,Opera的出现,结束了IE雄霸天下的日子。 然而,这对开发者来说,是好事,也是坏事。 说它是好事,是因为浏览器厂商为了取得更多的市场份额,会促使各浏览器更符合W3C标准,而得到更好的兼容性,并且,不同浏览器的扩展功能(例如-moz,-webkit开头的样式),对W3C标准也是个推进;说它是坏事,因为,多个浏览器同时存在,这些浏览器在处理一个相同的页面时,表现有时会有差异。这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”,无形中给我们的开发增加了不少难度。 从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题。 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性,也属于这一类。 3. 其他类别:除以上两类问题外的功能性问题,一般是浏览器自身提供的功能,在内核层之上的。 例如下面的页面,是一个渲染相关的问题: 在各个浏览器中都表现的不同,这就属于兼容性问题。 造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核,并且它们处理同一件事情的时候思路不同。 现今常见的浏览器及其排版引擎(又称渲染引擎)及脚本引擎,如下:

    而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码,不规范的代码会使不兼容现象更加突出。 例如: 不规则的嵌套: DIV 中直接嵌套LI 元素是不合标准的,LI 应该处于UL 内。此类问题常见的还有P 中嵌套DIV,TABLE等元素。 不规范的DOM接口和属性设置: 总之,人为的原因也占很大一部分。而人为造成兼容性问题的原因,除了粗心之外,大都源于浏览器bug 的存在,和开发者对标准的不了解。 比如,如果要做一个功能,功能是想让鼠标悬停在IMG 元素上方时,可以出现提示信息,经常针对IE 做开发的人,可能会使用IMG 元素的“alt” 属性,但其他浏览器中就是不给…alt? 属性面子。因为W3C 标准中规定要去做这件事的属性是”title“,大多浏览器符合标准,IE 不符合,这是IE 浏览器内核的问题;开发者不知道”title“ 才是正解,不遵循标准去写代码,是开发者的问题。所以,一个问题分两半,浏览器和开发者都有责任。 既然都有责任,就都有义务去解决兼容性问题。那么,从浏览器的角度来讲,它的厂商应该修复浏览器的bug和不合标准的地方,当某一天IE 的”alt“ 不能用于提示了,还有人用这个错误的属性去显示提示么?从开发者角度来讲,多了解标准,了解浏览器兼容性问题,就可以在开发的过程中,有效的避开兼容性问题,让你的页面在所有浏览器中畅通无阻。 废话少说,下面就讲讲如何有效的避免一些兼容性问题。 J AVA S CRIPT (4)

    浏览器间不兼容的原因及解决办法

    网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器。 一般情况下,我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器,下面是用的较频繁的CSS Hack技巧: 用的最广莫过于!important了,它可以针对IE(IE 7.0能正确理 解!important)和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important,就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异,我都会使用!important。 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html s elect {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >body select {…}

    这句与上一句的作用相同。 5、仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 6、仅IE6与IE5不识别,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 7、仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”/”}/”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有

    浏览器兼容性常见问题

    1.注释标签常用语法 1.1注释的注意事项

    1.2出错条件 1.3注释中多个地方出错时

    1.4两个出错的注释标签,其间的内容被视为注释的一部分 1.5解决方案 2.浏览器的字符编码 2.1问题描述 各浏览器对于字符编码别名支持的宽泛程度有差异,当指定了浏览器无法识别的字 符编码别名时,浏览器会以确定编码的优先级顺序采用设置的更低优先级的字符编码, 以此类推。而 Chrome Safari Opera 中对字符编码别名有着比其他浏览器更宽泛的支持。

    2.2文档的字符编码顺序 针对如何确定一个文档的字符编码,用户代码必须遵守下面的优先级顺序(优先级由高至低): (1)HTTP "Content-Type" 字段中的 "charset" 参数。 (2)META 声明中 "http-equiv" 为 "Content-Type" 对应的值中的 "charset" 的值。(3)元素的 charset 属性。 2.3实例1 上面是一段 PHP 代码,HTTP "Content-Type" 头字段设置了字符编码为 BIG5,页面中的 META 元素设置了字符编码为 UTF-8,页面本身的编码类型为 GB2312。页面执行时,通过脚本输出了当前浏览器所采用的字符编码类型。 这个动态页面在各浏览器中运行时均显示出了 BIG5,可见此时所有浏览器均遵照HTML4.01 规范所述,以更高优先级的 HTTP "Content-Type" 头字段的 "charset" 参数的值作为字符编码类型。

    2.4各浏览器默认编码格式 上面页面中没有设定任何的字符编码信息,则各浏览器对于这个页面将使用各自的默认编码。页面自身的编码为 GB2312。 各浏览器中运行效果如下: 2.5实例2 上面的动态页面自身的编码为 BIG5,HTTP "Content-Type" 头字段设置了字符编码为 maccyrillic,页面中的 META 元素设置了字符编码为 b.i.g+5。 各浏览器中运行效果如下:

    关于浏览器兼容性问题

    关于浏览器兼容性问题 制作网页时总会遇到各种浏览器的兼容性问题,工作也有一段时间了,做了一点小总结希望分享给大家,共同进步。 1、float定位。 Float定位是css排版中的非常重要的手段,属性float值:left、right、none(默认值),当设定了元素向左或者向右浮动时,元素会向其父元素的左侧或右侧靠紧。 在用float的同时我们要注意到 (1)float元素的父元素不能指定clear属性。 这是因为MaeIE下如果对float的元素父元素使用clear属性,周围的float元素布局就会混乱。 (2)float元素无比知道那个width属性 很多浏览器在显示未指定width的float元素时会有bug,所以不管float元素的内容如何,一定要为其制定width属性。(注意:制定元素时尽量使用em而不是px)(3)float元素不能指定margin和padding的属性 ie在显示指定了margin和padding的float元素时有bug。你可以再float元素内部嵌套一个div来势之margin和padding,也可以使用hack方法为ie指定特定的值。 (4)float元素之核的宽度要小于100% 如果float元素的宽度和正好等于100%,为保证大多浏览器显示正常,要是宽度之和小于100 2、margin加倍的问题。 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 3、ie6中莫名出现多余的字符 我遇到的现象是:ie6下有些问题,重复出现在第二行,就是某些段落或某些文字的末尾N个字符,他另起一行重复出现,在选选着重复出现的文字时,原有的文字也被选中 解决方法:很简单,在重复出现文字的末尾补N个 ;就可以。 4、ie7中正常,但ie8中不正常,div的位置position:absolute在ie8中不起作用 解决方法:设置html兼容ie7,在head下加 5、针对ie 6、ie 7、火狐浏览器 (1)Ie6 、FF对!important;测试正常 Ie7对!important;可以正确解释。 为了使他们都正常: #style1{color:#333;} FF正常显示#333; *html #style1{color:#666;} ie6显示#666 *+html #style1{color:#999;} ie7显示#999 *+html与*html是ie特有的标签,firefox暂不支持,而*+html又为ie7特有的标签。 注意:顺序不能错了。 (2)FF: 链接加边框和背景色,需设置display: block, 同时设置float: left 保证不换行。 参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height,

    浏览器兼容性bug

    常见浏览器兼容性问题与解决方案 标签:前端开发浏览器兼容问题 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。 第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。 文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题。(相关文章推荐:主流浏览器CSS 3和HTML 5兼容清单) 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

    最全整理浏览器兼容性问题与解决方案样本

    常用浏览器兼容性问题与解决方案所谓浏览器兼容性问题,是指由于不同浏览器对同一段代码有不同解析,导致页面显示效果不统一状况。在大多数状况下,咱们需求是,无论顾客用什么浏览器来查看咱们网站或者登陆咱们系统,都应当是统一显示效果。因此浏览器兼容性问题是前端开发人员经常会遇到和必要要解决问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精准按照设计图开发前端开发人员,可以说是精准到1px,她们很容易就会发现设计图局限性,并且在很少状况下会遇到浏览器兼容性问题,而这些问题往往都死浏览器bug,并且她们制作页面后期易维护,代码重用问题少,可以说是比较牢固放心代码。 第二类是基本按照设计图来开发前端开发人员,诸多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果实现也是重复调试得到,详细为什么浮现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这样写还不知因此然。此类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一种浏览器。改来改去也毫无头绪。其实她们遇到兼容性问题大某些不应当归咎于浏览器,而是她们技术自身了。 文章重要针对是第一类,严谨型开发人员,因而这里重要从浏览器解析差别角度来分析兼容性问题。 浏览器兼容问题一:不同浏览器标签默认外补丁和内补丁不同 问题症状:随便写几种标签,不加样式控制状况下,各自margin 和padding差别较大。 遇到频率:100% 解决方案:CSS里*

    备注:这个是最常用也是最易解决一种浏览器兼容性问题,几乎所有CSS文献开头都会用通配符*来设立各个标签内外补丁是0。 浏览器兼容问题二:块属性标签float后,又有横行margin状况下,在IE6显示margin比设立大 问题症状:常用症状是IE6中背面一块被顶到下一行 遇到频率:90%(稍微复杂点页面都会遇到,float布局最常用浏览器兼容问题)解决方案:在float标签样式控制中加入display:inline;将其转化为行内属性 备注:咱们最惯用就是div+CSS布局了,而div就是一种典型块属性标签,横向布局时候咱们普通都是用div float实现,横向间距设立如果用margin实现,这就是一种必然会遇到兼容性问题。 浏览器兼容问题三:设立较小高度标签(普通不大于10px),在IE6,IE7,遨游中高度超过自己设立高度 问题症状:IE6、7和遨游里这个标签高度不受控制,超过自己设立高度 遇到频率:60% 解决方案:给超过高度标签设立overflow:hidden;或者设立行高line-height 不大于你设立高度。 备注:这种状况普通出当前咱们设立小圆角背景标签里。浮现这个问题因素是IE8之前浏览器都会给标签一种最小默认行高高度。虽然你标签是空,这个标签高度还是会达到默认行高。 浏览器兼容问题四:行内属性标签,设立display:block后采用float布局,又有横行margin状况,IE6间距bug 问题症状:IE6里间距比超过设立间距 遇到几率:20%

    各种浏览器兼容问题列表

    各种浏览器兼容问题列表 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >bod y select {…} 这句与上一句的作用相同。 5、仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 6、仅IE6与IE5不识别,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 7、仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样

    div+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 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐,用下面的一种感觉最安全) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 代码: 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 代码: 注意: *+html 对IE7的兼容必须保证HTML顶部有如下声明: 代码: 二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对, 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽. 代码: ********************************************************************* ************************************************** 三、其他兼容技巧(相当有用) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不 会.(可用!important解决)

    怎么设置浏览器兼容模式和安全站点

    怎么设置浏览器兼容模式和安全站点 网页中站点是easySite 内容管理平台主要管理的逻辑单元,站点管理是对一个Internet的站点进行组织、维护和管理的功能集合当我们在使用电脑时,很多时候都 需要用兼容性视图打开一些特殊的网站,与设置安全站点。下面小编就和大家分享下Win10系统IE和360浏览器浏览器兼容模式和安全站点的具体操作步骤。 设置浏览器兼容模式 1、打开IE浏览器,右击浏览器顶部,勾选菜单栏将菜单栏调出来。 2、找到工具菜单栏,下面有一个兼容性视图设置。 3、打开兼容性视图设置窗口,输入网站地址,单击添加按钮,网址就自动添加到下面的列表中,并勾选在兼容性视图中显示Internet站点。 4、如果是360浏览器,我们打开之后,在网址后面有一个闪电按钮,点击一下。会出现一个极速模式和兼容模式,我们选择兼容模式即可。(默认是极速模式)设置安全站点 1、有时候我们也需要设置一下安全站点,我们自己开发的网站或者公司自己的网站有时候需要进行这样的设置,打开IE浏览器,在工具菜单栏下找到Internet选项。 2、在安全选项卡,选择受信任站点,单击站点按钮。 3、输入网址添加进来,添加之前去掉https验证。 补充:浏览器常见问题分析 1.IE浏览器首次开机响应速度慢,需要数秒。搞定办法:IE下选择工具-internet 选项-连接-局域网设置-取消自动检测。 2. IE9图片显示不正常或干脆不显示,尤其是QQ空间搞定办法:工具-internet 选项-高级-加速图形-运用软件而非GPU 选择。 3. 打开网页显示【Internet Explorer 已不再尝试还原此网站。该网站看上去仍有 问题。您可以执行以下操作:转到首页】搞定方案:工具-internet选项-高级中关闭 【启用崩溃自动恢复】重新启动ie后即开。 4. 下载完所需安全控件也无法运用各种网银,付款时识别不出u盾搞定方案:据 提示下载银行安全控件并安装。插上u盾,拿建行为例:在开始菜单里-所有程序-中 国建设银行E路护航网银安全组件-网银盾管理工具打开后点击你的u盾并注册。然

    Windows系统下各浏览器兼容性

    Windows系统下各浏览器常用CSS HACK汇总表 1. 此汇总表中测试浏览器的版本为: 微软系统自带:IE6、IE7、IE8 火狐:Firefox 3.6.6 Safari:Safari 5.0 谷歌浏览器:Chrome 6.0.458.1 dev Opera浏览器:Opera 10.60 2. 其中,多数CSS hack是在selector{property:value;}基础上更改的。 selector代表CSS选择器,property代表CSS特性,value代表特性的值。 3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera 4. 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等)。 3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】:「*」、「_」 【示例】: #divcss5{ background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取

    Windows系统下各浏览器兼容性

    Win dows系统下各浏览器常用CSS HAC汇总表 Hack ________________________ iJ/pe "-Hitml sei ec tori 1 *html selector 1 _prop erty :value 1 -property: valued 1 html* Beiector| 1 "property; value 1 property: valued 1 selector, c-moz-^ny-linkG -. 2 selector^ xz-moz-any-link^ < moz-document y fl-prefix(){ (2) htrnl>/=t*/body selector, x:-moz-^ any-link htrril^^^body SQkctDQ K:~moz' ? any-link, x:def3ult{+H:} 娄 二空屛头的.H舉険特百扩辰務式…..…2 ^irimdid seitan drid (-widtjkie min-dE vice-pixekratio:0)电… U;webkit开头的畑bkit測览器持有扩展样戒2 dnwbiw ail and ('webkit-miri'device-| pixal-ratio; 10000)* not all and 2 (-webkit- min-device-pixel-ratio: Ch Sa Op 1E6IE7iEd...— FF 1. 此汇总表中测试浏览器的版本为: 微软系统自带:IE6、IE7、IE8 火狐:Firefox 3.6.6 Safari : Safari 5.0 谷歌浏览器:Chrome 6.0.458.1 dev Opera 浏览器:Opera 10.60 2. 其中,多数CSS hack 是在selector{property:value;} 基础上更改的。 selector代表CSS选择器,property 代表CSS特性,value代表特性的值。 3. FF 代表Firefox ,Ch 代表Chorme ,Sa 代表Safari ,Op 代表Opera 4. Q 代表Quirks Mode ,S 代表Standards Mode 。 5. Hack Type 列的数字,指的是上面CSS hack的实现方式中的列表号。 1是指利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit 特有的扩展样式实现的hack。

    IE浏览器和火狐浏览器兼容问题

    IE浏览器和火狐浏览器兼容问题.txt22真诚是美酒,年份越久越醇香浓型;真诚是焰火,在高处绽放才愈是美丽;真诚是鲜花,送之于人手有余香。一颗孤独的心需要爱的滋润;一颗冰冷的心需要友谊的温暖;一颗绝望的心需要力量的托慰;一颗苍白的心需要真诚的帮助;一颗充满戒备关闭的门是多么需要真诚这一把钥匙打开呀!IE浏览器和火狐浏览器兼容问题——CSS篇 一、css+div 样式IE与FF兼容问题汇总 IE和火狐的css兼容性问题归总 CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点。 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 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上 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 id=\”floatB\”> <#div id=\”NOTfloatC\”>

    浏览器兼容性解决方案

    所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。好吧,我服了行吧,那我就利用你们的不兼容各写一段css,让他们各执行各的,呵呵。 一、!important (功能有限) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 例如: #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ }

    二、CSS HACK的方法(新手可以看看,高手就当路过吧) 首先需要知道的是: 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6、IE7 共用 *height: 100px; IE7、FF 共用 height: 100px !important; 例如: #example { height:100px; } /* FF */ * html #example { height:200px; } /* IE6 */ *+html #example { height:300px; } /* IE7 */ 下面的这种方法比较简单 举几个例子: 1、IE6 - IE7+FF #example { height:100px; /* FF+IE7 */ _height:200px; /* IE6 */ } 其实这个用上面说的第一种方法也可以 #example { height:100px !important; /* FF+IE7 */ height:200px; /* IE6 */ } 2、IE6+IE7 - FF #example { height:100px; /* FF */ *height:200px; /* IE6+IE7 */ } 3、IE6+FF - IE7 #example { height:100px; /* IE6+FF */

    (IE工业工程)如何解决IE兼容性

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况,在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。随着浏览器版本的增多,解决IE浏览器兼容性显得尤为重要. 一、!important (功能有限) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 例如: #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ } 二、CSS HACK的方法(新手可以看看,高手就当路过吧) 首先需要知道的是: 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6、IE7 共用 *height: 100px; IE7、FF 共用 height: 100px !important; 例如: #example { height:100px; } /* FF */ * html #example { height:200px; } /* IE6 */ *+html #example { height:300px; } /* IE7 */ 下面的这种方法比较简单 举几个例子: 1、IE6 - IE7+FF #example { height:100px; /* FF+IE7 */ _height:200px; /* IE6 */ } 其实这个用上面说的第一种方法也可以 #example { height:100px !important; /* FF+IE7 */

    如何解决不同浏览器之间的兼容性问题

    如何解决不同浏览器之间的兼容性问题 常见的浏览器兼容性问题与解决方案大致有以下九种形式: 一、不同浏览器的标签默认的外边界和内填充不同 问题表现:不加样式控制下,margin和padding差异较大 解决方案:css里*{margin:0; padding:0;} 备注:这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0 二、块属性标签float后,又有横向的margin情况下,在IE6显示mar gin比设置的大 问题表现:IE6后面的一块被顶到下一行 解决方案:在float的标签样式控制中加入display:inline;转化为行内属性 备注:横向浮动的div布局,使用上margin进行边界设置时,必然会碰到此问题 三、设置较小高度标签(一般小于10px),在IE6、IE7,遨游中高度超出设置高度值

    问题表现:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-he ight小于你设置的高度 备注:一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度,即使标签是空内容,标签的高度还是会有默认行高。 四、行内属性标签,设置display:block后采用float布局,又有横向的m argin情况,IE6间距bug 问题表现:IE6的间距比超过设置的间距 解决方案:在display:block;后面加入display:inline;display:table; 备注:行内属性标签,为了设置宽度,需要设置为display:block;(表单元素除外)在用float布局且有横向margin后,在IE6下,就具有了块属性float后的横向margin的bug。由于设置为display:inline,高度失效,所有在后面补上display:table。 五、图片默认有间距

    htmldivcss常见的浏览器兼容问题及解决方法(很全)

    div+css教程之常见的浏览器兼容问题及解决方法 1.图片下方出现几像素的空白间隙 问题说明:这个问题在ie6和ff(火狐)下经常见到,例如

    这个图片下面会有一条空白间隙, 解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align: top;} 2.IE6双倍margin的BUG(双边距) 问题说明:这是ie6一个著名的bug,当一个元素向一边浮动时,其它同一个方向如果有margin的话,ie6就会产生双倍的margin。例如:
    在ie6下显示会有margin-left:20px的距离解决方法:加个_display:inline:属性,例如
    3.ie6下的浮动元素和非浮动元素间出现3像素BUG 问题说明:这也是ie6一个著名的bug,当一个元素浮动时,同级别的文字没有 浮动,在ie6下它们之间就会产生3个像素的bug。例如:
    摘要摘要摘要摘要
    ,图片和文字就会出现3像素 解决方法:方法一,两个元素都浮动,如:
    摘要摘要摘要摘要
    ;方法二,这种设计时一般图片和文字要有间隙的,做个ie6的hack就行,如:
    摘要摘要摘要摘要
    4.li在IE中底部空行 问题说明:当li里面有两个以上的浮动元素时,li的下面就会产生一条空白间隙,例如 解决方法:这个问题和第一个问题很相似,解决方法也是一样,在li上加个垂直方向的属性,例如:

  • 相关文档
    相关文档 最新文档