0

0

工作中遇到的浏览器差别(就不叫IE6bug了)_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:26:54

|

1234人浏览过

|

来源于php中文网

原创

1、根据ie版本写css

 

 非ie:if !IE;          仅IE:if IE;                     等于:if IE 6;    

 大于:if gt IE 8;    大于或等于:if gte IE 8;    小于或等于:   if lte IE 8;      

2、关于display:table-row;

比如table中的tr,在js里控制它显示和不显示:document.getElementById('theBlueRow').style.display='table-row'和display:none。IE6不支持table-row,改用display=''。就可以了。

立即学习前端免费学习笔记(深入)”;

3、获取设置节点的自定义属性:

对于

获取自定义属性myAttr:

若是document.getElementById("newTest").myAttr,则只对IE6、IE8有效,IE9、IE10、chrome、firefox、safari对无效;

若是document.getElementById("newTest").getAttribute('myAttr')则都有效。

设置自定义属性:

若是document.getElementById("newTest").myAttr = "new";

alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest').getAttribute('myAttr'));

输出结果:IE9、IE10、firefox、chrome、safari均为:new,old。IE6、IE8则为:new,new。

若是document.getElementById("newTest").setAttribute("myAttr","new"); 

海螺语音
海螺语音

海螺AI推出的AI语音生成工具,支持多种语种、情绪和效果。

下载

alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest').getAttribute('myAttr'));

输出结果:IE9、IE10、firefox、chrome、safari均为:undefined,new。IE6、IE8则为:new,new。

所以为了兼容性,获取和设置自定义属性时统一使用:.getAttribute('myAttr')和.setAttribute("myAttr","new"); 获取jquery的方法.attr();

4、ie6、7里,如果

则设置td的border无效;
     如果是 则设置td的border有效.

(在tr上设置border在ie6、7中总是无效的。)

5、IE6里弹出层或是说设置了position:absolute/fixed;的div遮不住select。

解决办法:通过一个与绝对定位的div同样大小的iframe来遮住select。

div content

其中的iframe的高度和宽度不能同时是100%。

6、ie6不支持position:fixed;的解决方法:

纯参考完美解决IE6不支持position:fixed的bug

#fixedDiv{    position: fixed;top:0;left:0;}     /*for ie6*/*html #fixedDiv{ position:absolute;left:expression(eval(document.documentElement.scrollLeft+20));top:expression(eval(document.documentElement.scrollTop+20))} 

但是这样在滑动的时候,这个fixeDiv在它该待的地方有很明显的振动,原因是‘

?

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!

’,添加下列代码后就完全看不出振动了:

* html,* html body{background-image:url(about:blank);background-attachment:fixed;//不可少,防止画面闪烁}

 不要直接用做测试,记得写.....

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号