IE CSS Bug

2016-02-20 00:22 3 1 收藏

今天图老师小编给大家展示的是IE CSS Bug，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

【 tulaoshi.com - Web开发】

最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。

作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。

今天，趁着想完善公司的内部样式框架，把的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。

问题浏览器DEMO解决方法 Hacking Rules:

property:all-ie9; property:gte-ie8;*property:lte-ie7; +property:ie7; _property:ie6;

| | | *height:0;
_overflow:hidden; | form [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;} | | | | | | | | | 利用去除图片中的 Gamma profiles | | | | 给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[]，因为会增加一下HTTP请求 | | | | | | | |

来源:http://www.tulaoshi.com/n/20160220/1631724.html

上一篇： CSS网页制作:浮动清除的新方法
下一篇：明明不在乎,却还要到空间看个遍,然后删除记录.

看过《IE CSS Bug》的人还看了以下文章更多>>

快速定位到复杂的CSS BUG问题

标签： Web开发

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓复杂实质是指触发的条件很复杂，而BUG 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。 ...

远离CSS BUG 尽量保持代码有语义

标签： Web开发

javascript之解决IE下不渲染的bug

标签： Web开发

有时候，你会发现，在一些JS应用中，涉及到CSS的重新渲染（即页面样式需要更新）的话，IE死活不变。此时你需要让IE重新渲染一下： function handleIEhasLayout(){ //trigger re-rendering document.body.style.zoom = 1.1; //restore it document.body.styl...

CSS Hack:区分IE6/IE7/IE8/Firefox

标签： Web开发

今天被在修改CSS的时候，突然碰到要单独Hack IE8的。当然，用注释非常方便，只要添加相应的注释就可以解决。但问题是，为了一句CSS写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。结论如下： selector{ property:value; /* 所有浏览器 */ property:value\9; /* 所有IE浏览器 */ +property:value; /* IE7 */ _prope...

IE6奇数宽度或高度的BUG

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div(right:0)，如图：可是在IE6下查看，却变成了right:1px的效果了： IE6还有奇数宽度的bug，解决方案就是将外部相对定位的div宽度改成偶数。查看源码： CSS代码 #out { width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数...

查看更多精彩>>