考完试就来实习的公司实习了,大概最近有两周时间就一直在做公司给新人布置的大作业。虽然只是很简单的一个小的项目,但却从其中总结到了不少有用的东西。计划将其发出来一系列文章,算是对这两周时间的总结。也算是在这里留下记录,防止以后坑在同一个地方,接下来几周没事持续填坑吧。

在没来公司之前,我做过的项目也好,学习的新技术也好。从来都没有去想过去兼容IE6及以下版本的浏览器的,之前一段时间淘宝刚宣布不再继续支持IE6,刚好我做大作业的时候,百度也宣布不再继续支持IE6。但是来了公司之后接到的新人大作业之后,js与css布局都有一个共同的要求,兼容IE6,7浏览器。虽然很无奈,也知道IE6下坑很多,但毕竟也算是个尝试。所以就硬着头皮去做了。

做的一个小小的项目,总结出来的IE6浏览器与现代浏览器所不同的表现就有十几条。真是really心疼几年前的前端er,兼容IE6真的会让人抓狂。然后碰到的有IE6下被人熟知的BUG,也有自己碰到比较不常见的BUG,总结了几条,下面就慢慢道来吧。

一:IE6下浮动元素双倍margin。

具体表现就是当给一个父元素的第一个子元素向左、右浮动时,倘若在这个浮动方向上添加了margin值,在IE6下这个margin值会加倍。下面来看例子。

<div id="parent">
    <p>IE6下浮动方向上的margin值将会变为设置值的两倍</p>
</div>
#parent p{
    float:left;
    margin-left:20px;
}

可以自己试一下,在IE6下明显能看出比其他浏览器margin要大一点。

解决方案:1.利用css hack,给该元素添加_margin: 10px;也就是利用只有IE6能识别的hack,将其margin值设为本来要设置margin值的一半,这样IE6加倍之后,就和正常浏览器表现一致了。

2.将浮动元素设置为行内元素。display:inline;

二::IE6下html文件里的注释会影响布局/出现了文本的重复。

BUG原因:当满足如下公式,溢出文字的个数=注释的条数*2-1。注释就会造成元素高度变化/出现重复文本。

解决方案:1.不要写注释。。 2.利用<!—[IF !IE]>标签包围注释。

三:IE6下:hover只对a标签起作用。

BUG原因:css1不支持对除a标签之外的标签添加hover效果。

解决方案:这个算是比较经典的IE6的BUG了,解决的方案有很多种,我使用的是引入一个htc文件。htc文件就是专门用来解决IE下BUG的文件。这个原理是使用js来给元素定义onmouseover和onmouseout事件,使得所有标签在IE6下都可以支持hover事件。具体的使用方法如下,先定义一个csshover.htc文件,将如下代码复制进去。

<public:attach event="ondocumentready" onevent="CSSHover()" /><script>
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>

接下来就是在你html文件的head头里按如下方式以正确的路径将其引进来,就可以完美解决IE6下hover只在a标签上有作用的BUG。

<!--[if lte IE 6]>
        <style type="text/css">
            body { behavior:url("./css/csshover.htc"); }
        </style>
<![endif]-->

四:IE6不支持子代选择器。

其实这个不算是IE6的BUG,而是IE8以下的浏览器都不支持子代选择器。

可以看下w3c的文档。https:www.w3.org/TR/css21/selector.html

解决方案:可以综合使用js获取子节点和给相应节点设置ID或者CLASS来解决。

五:IE6不支持getELementsByClassName。

这个是IE8以下都不支持的。

解决方案:利用浏览器能力检测,自己模拟一个getELementsByClassName方法。代码如下。

if(!document.getElementsByClassName){
        document.getElementsByClassName = function(className, element){
            var children = (element || document).getElementsByTagName('*');
            var elements = new Array();
            for (var i=0; i<children.length; i++){
                var child = children[i];
                var classNames = child.className.split(' ');
                for (var j=0; j<classNames.length; j++){
                    if (classNames[j] == className){
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        };
    }

六:IE6不支持边框透明。

这条呢,看上去貌似没什么,不支持边框透明,本来边框也不怎么设置透明这个值啊。那你就忽略了一种情况,要是用css画三角形来模拟下拉标识符时,就必须用到边框透明。

普通浏览器下这样设置

border-width: 4px 4px 0;
border-color: #a4a4a4 transparent transparent;

IE6不支持边框透明,因此可以这样设置边框来模拟效果。设置要显示一边的三角其边框值为:border-style:solid,其他三边边框为border-style:dashed。这样便可以利用虚线样式的border形成空白。代码如下。

_border-width: 4px 4px 0;
_border-color:#a4a4a4 white white white;
_border-style:solid dashed dashed dashed;

七:IE6文本框不支持placeholder属性

解决方法:利用浏览器能力检测,为低版本浏览器添加value值来代替placeholder。

八:IE6不支持min/max-width/height属性

解决方法:添加如下所示代码

_width:expression(this.width>300?"300px":ture); max-width:300px;

但css表达式应该尽量避免使用。最好是给IE6添加_height/_width。

九:IE6下3px的像素偏差

当浮动元素与非浮动元素相邻,即使你没在俩元素之间设置边距,依然看上去会出现一条缝隙。

BUG原因:非浮动元素的layout未触发。

解决方案:1.将非浮动元素也设置为浮动。2.浮动元素设置display:inline 和 -3px margin

作业总结(一):IE6下面的那些坑的更多相关文章

  1. 从IE6到IE11上运行WebGL 3D遇到的各种坑

    这篇<基于HTML5的电信网管3D机房监控应用>基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行在老的IE678910浏览器 ...

  2. 小结IE6的坑

    1.z-index在position:relative/absolute等定位属性设置后还是无效,会导致top栏的导航栏目的子菜单被下面的层遮住,无法显示:解决办法:?http://www.wufan ...

  3. 吴恩达深度学习第2课第2周编程作业 的坑(Optimization Methods)

    我python2.7, 做吴恩达深度学习第2课第2周编程作业 Optimization Methods 时有2个坑: 第一坑 需将辅助文件 opt_utils.py 的 nitialize_param ...

  4. 百分比布局实现响应式布局在 IE6 中填坑思路

    最近接了个政府项目,政府项目要求响应式,并且兼容IE6,不想用媒体监测的方法,于是用了百分比布局的方法,但是IE6真是名不虚传,做第一个界面就遇到了个bug ①两张宽度各占50%的图片无法在同一横排, ...

  5. 吴恩达深度学习第2课第3周编程作业 的坑(Tensorflow+Tutorial)

    可能因为Andrew Ng用的是python3,而我是python2.7的缘故,我发现了坑.如下: 在辅助文件tf_utils.py中的random_mini_batches(X, Y, mini_b ...

  6. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  7. css 填坑常用代码分享

    以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/mast ...

  8. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  9. 记jQuery.fn.show的一次踩坑和问题排查

    最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...

随机推荐

  1. Make 命令教程

    http://www.ruanyifeng.com/blog/2015/02/make.html 作者: 阮一峰 日期: 2015年2月20日 代码变成可执行文件,叫做编译(compile):先编译这 ...

  2. 将php网站移到CentOS 6.7上[二]:将网站部署到服务器上

    首先,确保lamp环境已安装好.准备好项目源代码,数据库备份文件等.由于没有安装好VNC,因此只能用ssh部署了. 将项目源代码压缩,Linux默认是支持SFTP的,用SFTP将源代码压缩包上传到 / ...

  3. jboss7(01)服务器开启和关闭命令

    1.简单开启服务器的命令:进入到 bin 目录下,输入 ./standalone.sh 命令. 这种开启服务器的方式有个缺点,当你的命令窗口关闭后,服务自动down了 2.让服务器开启后在后台运行:进 ...

  4. 对象Transform,对属性赋值

    private void ContructRequest(Dictionary<string, string> dictionary, CustomerSearchRequest requ ...

  5. 复习CSS

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. MSN

    msn (微软软件) 编辑 MSN,全称Microsoft Service Network,是微软公司(Microsoft)旗下的门户网站. MSN(门户网站)提供包括必应搜索.文娱.健康.理财.汽车 ...

  7. 解决tableView分割线左边不到边的情况

    //解决tableView分割线左边不到边的情况//    if ([tableView respondsToSelector:@selector(setSeparatorInset:)]) {//  ...

  8. 软件测试技术(三)——使用因果图法进行的UI测试

    目标程序 较上次增加两个相同的输入框 使用方法介绍 因果图法 在Introduction to Software Testing by Paul一书中,将软件测试的覆盖标准划分为四类,logical ...

  9. java的集合类【转】

    在JDK API中专门设计了一组类,这组类的功能就是实现各种各样方式的数据存储,这样一组专门用来存储其它对象的类,一般被称为对象容器类,简称容器类,这组类和接口的设计结构也被统称为集合框架(Colle ...

  10. perl 变量详解

    http://www.perlmonks.org/?node_id=933450 use strict; use Devel::Peek; my $a; Dump($a); $a=4; Dump($a ...