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

在没来公司之前,我做过的项目也好,学习的新技术也好。从来都没有去想过去兼容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. 多本地代码工作点更新到2个远端GIT仓库

    摘要:本文介绍了笔者多个本地工作节点(地方)的多台电脑(PC/笔记本电脑)同步源码到2个远端的GIT(一个GITHUB国外强制公开,一个oschina国内可不公开). 作者:太初 转载说明:请指明原作 ...

  2. Linux快速上手

    1.Linux系统架构 内核(kernel) 内存管理(mm) Linux内存特性无论物理内存有多大,Linux 都将其充份利用,将一些程序调用过的硬盘数据读入内存,利用内存读写的高速特性来提高Lin ...

  3. mysql 目录的了解以及Linux

    Linux   目录                描述 /                                                                       ...

  4. Asp.Net Core 发布和部署(Linux + Jexus )

    前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在 asp.net core 中对我们的已经完成的程序进行发布和部署. 有关如何使用 Nginx 进行部署, ...

  5. 1.springMVC+spring+Mybatis的整合思路

    SSM整合的过程:就是把一些东西交给spring管理,也就是添加配置文件的一个过程.那么有哪些东西我们要交给spring管理呢?大概有以下几个: 1.数据源(可配置数据库连接池) 2.SqlSessi ...

  6. MongoDB学习笔记(索引)(转)

    一.索引基础:    MongoDB的索引几乎与传统的关系型数据库一模一样,这其中也包括一些基本的优化技巧.下面是创建索引的命令:    > db.test.ensureIndex({" ...

  7. 详解SESSION与COOKIE的区别

    在PHP面试中 经常碰到请阐述session与cookie的区别与联系,以及如何修改两者的有效时间. 大家都知道,session是存储在服务器端的,cookie是存储在客户端的,session依赖于c ...

  8. asp.net httpmodule 访问页面控件 备忘

    用到的时候发现还得找代码,存一个例子方便自己和他人修改: using System; using System.Data; using System.Configuration; using Syst ...

  9. 在Android开发中使用Ant 一:环境的搭建及入门

    配置Ant环境 下载Ant:http://ant.apache.org/bindownload.cgi 在windows上应该选择zip压缩包,将zip压缩包解压到一个目录. 打开系统环境变量,在系统 ...

  10. Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...