正文

csshacker使用小结(兼容ie678)

爱尚丽明  2022-02-08  745

关键词：

什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

如果想系统的学习css hacker的相关资料，推荐查看这篇文章（http://www.jb51.net/css/493362.html）。

<meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">这行代码是永远以最新的IE版本模式来显示网页，使IE支持HTML5。
<meta name="renderer" content="webkit">这行代码是360浏览器渲染页面需默认用极速内核

各浏览器CSS兼容问题汇总：http://www.jb51.net/css/9707.html
条件样式替代CSS Hacks方案：http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

建议：使用ietester软件测试IE6、7、8。
顾名思义，!important的优先级要高. 举例说明：
body
{
           background-color:#FF0000 !important;
           *background-color:#00FF00 !important;
           *background-color:#0000FF;
           background-color:#000000;
}
IE6选择最后一个，即：（因为IE6对important不感冒）
IE7选择第二个，即：background-color:#000000;（因为IE7开始对important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）
IE8和Firefox、Opera、Safari选择第一个，即：!important;（IE8完全感冒于important，同时丢弃了对*的感情）
另外再补充一个，下划线"_",
IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。

整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别

IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
参考网址：http://shouce.jb51.net/csshack/

以下两种方法几乎能解决现今所有HACK:

1. !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
2. IE6/IE7对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
3.当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。对 IE7 来说，最好的方法是设置元素的最小高度为 0 (min-height:0;)。
4.ie-css3.htc让IE6, 7, 8也支持CSS3圆角，阴影，文本阴影等效果。

附网址：http://www.jb51.net/css/63281.html

5.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}，注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px;}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
6.设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline。
7.min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
放到标签下，然后为 div指定一个类：

然后CSS这样设计：
selector{
min-width:600px;
_width:expressio n(document.body.clientWidth < 600?"600px":"auto");
}
或selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}
8.ie下元素消失，给该元素添加：position:relative;
9.IE7浏览器下，文字越多，按钮两侧padding留白就越大，解决办法是添加overflow：visible属性。

ie兼容问题(代码片段)

js兼容问题1阻止事件冒泡：//js阻止事件传播，这里使用click事件为例document.onclick=function(e)vare=e||window.event;if(e.stopPropagation)e.stopPropagation();//W3C标准elsee.cancelBubble=true;//IE....2阻止默认事件：//js阻止默认事件document.onclick=function(e)vare=... 查看详情

jq版本选择。

jQuery目前的三大版本：1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增... 查看详情

ie兼容性小结（ie7及以上版本）

...的代码，用着早已尘封的技术。（注：因为用户原因可能使用ie7，而非蛋疼要网站支持ie低版本）既然无法说服不使用ie系列，那就乖乖让网站支持ie7、8系列吧！坑爹的工作就这样开始了，虽然觉查看详情

jquery的基本使用-入口函数

...更新维护的版本各个版本的下载:https://code.jquery.com/jQuery使用步骤：引入后使用查看详情

仿京东首页，浏览器兼容小结

练习做了一个京东首页，使用不同浏览器测试了一下，发现了不少的问题，做一下总结。地址：https://zhangcuizc.github.io/jd-new/1、IE10在IE10中基本正常，主要的问题是设置了链接的图片在IE10中都会有一个边框，不仅丑而且导致部分... 查看详情

jquery---版本问题(代码片段)

...本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）关于压缩版和未压缩版jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本... 查看详情

jquery(代码片段)

...each、data、Ajax下载链接：jQuery官网jQuery版本1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)2.x：不兼容IE678，很少有人使用，官方只做BUG... 查看详情

jquery选择什么版本1.x?2.x?3.x?

目前jQuery有三个大版本：1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新... 查看详情

zepto和jquery的区别，zepto的不同使用8条小结

...ry的团队在2.0版中不再支持旧版的IE（678）一样。因为Zepto使用jQuery句法，所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中，而其他浏览器则能享受到Zepto在文件大小上的优势，然而它们两个的API不是完全兼容的... 查看详情

使用pie.htc进行ie兼容css3

步骤：1、引入文件。注意PIE.htc文件和css文件要放在同一个目录下；2、在css元素中加上 behavior:url(pie.htc);3、可以愉快的写csshack啦，这时需要的圆角平移等等部分css3属性在ie678上都可以展示出来<!DOCTYPEhtml><html><... 查看详情

jquery-jqueryscrolltop怎么解决所有浏览器兼容问题

...,最后是document.body.scrollTop　　当然也可以直接scrollTop而不使用pageYOffset　　以下是MDN提供的兼容性代码　　scrolltop=(((t=document.documentElement)||(t=document.body.parentNode))&&typeoft.scrollTop==‘number’?t:document.body).scrollTop　　转载，仅供... 查看详情

访问关系兼容性写法(代码片段)

在IE678不支持previousElementSibling和nextElementSibling；在IE678支持 previousSibling和nextSibling；兼容性写法:varpre=div.previousElementSibling||div.previousSibling;varnext=div.nextElementSibling||div.next 查看详情

jquery简易教程(代码片段)

...入门jQuery版本选择目前jQuery有三个大版本：1.x：兼容ie678,使用最为广泛的，官方只做BUG维护,功能不再新增。因此一般项目来说，使用1.x版本就可以了，2.x：不兼容ie678，很少有人使用，官方只做BUG维护,功能不再新增.如果不考虑... 查看详情

jquery选择什么版本1.x?2.x?3.x?

...ery什么版本稳定？目前jQuery有三个大版本：1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)2.x：不兼容ie678，很少有人使用，官方只做BUG... 查看详情

addeventlistenerattachevent和解决ie678this指向错误

[JS] addEventListenerattachEvent和解决IE678this指向错误电梯直达1# php 发表于2014/4/1301:17 | 只看该作者标准浏览器中可以使用addEventListener()函数来给DOM元素绑定事件，使用removeEventListener()函数查看详情

jquery选择什么版本1.x?2.x?3.x?(代码片段)

ie678不支持html5新标签

html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！... 查看详情

jquery学习笔记(代码片段)

一、JQuery介绍JQuery是一个轻量级、兼容多浏览器的JavaScript库。可以更方便的处理HTMLDocument、Events、实现动画效果、方便的进行Ajax交互，能够极大的简化JavaScript编程。JQuery1.X版本兼容IE678，官方制作BUG维护，功能不更新。3.x版本... 查看详情