文档章节

关于浏览器的bug和解决方案(非hack法)

 页疑
发布于 2014/12/25 01:36
字数 500
阅读 8
收藏 0
  1. <p>test1<span>test2</span></p>

       设置span右浮动,在IE6/7下span会掉到p的下一行的最右边。

       解决方案:用绝对定位position:absolute代替。

  2. <div>这里放任何内容</div>

       设置div的height为0,在IE6下无效。

       解决方案:无需强调动画效果可以用display:none/block代替。

  3. <form><button id="test">test</button></form>

        估计很多同学为了做个简单测试会像上面这样写,像这样写,用js给button绑定点击事件后,在chrome、IE8/9/10/11下,点击会出现事件闪一下然后没反应,而下IE6/7下却是正常的。这时候会发现闪一下是因为执行了表单默认的提交动作(注意看URL后面多出来一个问号就秒懂了)而没有执行自行绑定的onclick事件。

         解决方案:使用<form><input type="button" value="test" id="test"  /></form>或者在onclick事件中return false;

  4. IE6/7/8不支持getElementsByClassName方法,所以需要自己写。

        解决方案:以下两种写法提供参考。

//第一种
function getElementsByClassName(className,tag){  
              //对tag进行过滤,取出所有tag对象
              var allTags = document.getElementsByTagName(tag);  
              var matchingElements = new Array();  
                
              //正则表达式  
              className = className.replace(/\-/g,"\\-");  
              var regex = new RegExp("(^|\\s)" +className+ "(\\s|$)");  
                
              var element;  
                
              //将取出的tag对象存入数组中。  
              for(var i = 0;i < allTags.length;i++){  
                  element = allTags[i];  
                  if(regex.test(element.className)){  
                      matchingElements.push(element);  
                      }  
                  }  
              return matchingElements;  
    }
    if (document.getElementsByClassName) {
		。。。
	}else{
		。。。
	};

//第二种,直接放在js最前面,后面则直接使用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(' ');
      lassNames.length; j++){
        if (classNames[j] for (var j=0; j<c== className){ 
          elements.push(child);
          break;
        }
      }
    } 
    return elements;
  };
}

© 著作权归作者所有

粉丝 1
博文 48
码字总数 39341
作品 0
南岸
私信 提问
关于浏览器的兼容问题

关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如...

熊蛋子17
2017/11/23
0
0
CSS hack大全之特殊符号的应用

由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开...

五月兰
2012/08/09
0
0
煮酒论英雄-CSS HACK 你不知道的那些事儿!

很多朋友搞不清楚CSS中有哪些HACK,怎么使用,我翻译+整理了一下贴在这里。这篇文章是关于CSS的hacking技术。不要和微软专有 的CSS属性“滤镜”混淆。 在 理想世界里,正确的CSS应该在任何支...

做h5的小韩
2016/07/12
6
0
转载 div+css浏览器兼容实例二:css hack的理解

上周给大家转载了《Div+css浏览器兼容实例分析(一)》,今天继续给大家转载《div+css浏览器兼容实例二:css hack的理解》。 先来说一下什么是css hack ,写了这么久的div+css代码,我还真不...

oecp
2011/06/07
0
0
【转】 IE下判断IE版本的语句...[if lte IE 6]……[endif]

<!--[if lte IE 6]>……<![endif]--> Ite:less than or equal to意思是小于或等于IE6浏览器,用于IE浏览器的条件注释,常用于CSShack,针对IE的JS等。 在进行WEB标准网页的学习和应用过程中...

mj4738
2012/02/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部