CSS hacker(兼容IE6、7、8)

<  meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1" >这行代码是永远以最新的IE版本模式来显示网页,使IE支持HTML5。

< !--[if lt IE 9] >

    < script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">

    < script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">

< ![endif]-- >

各浏览器CSS兼容问题汇总:http://bbs.html5cn.org/thread-83735-1-1.html

IE bug汇总:http://www.w3cfuns.com/blog-5454803-5404450.html

建议:使用ietester软件测试IE6、7、8。

顾名思义,!important的优先级要高. 举例说明:
body
{
           !important;
           *background-color:#00FF00 !important;
           *
           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://www.duitang.com/static/csshack.html
以下两种方法几乎能解决现今所有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属性。

时间: 2024-10-13 02:50:55

CSS hacker(兼容IE6、7、8)的相关文章

[转]CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 2013-12-12  By 奥夫 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !impo

(转)Css样式兼容IE6,IE7,FIREFOX的写法

根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别IE6与IE7:          background:green !important;background:blue;   区别IE7与FF:          background:orange; *background:green;   区别FF,IE7,IE6:          back

CSS完美兼容IE6/IE7/FF的通用方法

一.CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) wrapper {width: 100px!important; /* IE7+FF /width: 80px; / IE6 */} 2, IE6/IE77对FireFox +html 与 *html 是IE特有的标签, firefox 暂不支持.而+html 又为 IE7

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HA

CSS Hack 兼容IE6、IE7 、FireFox

!important 兼容IE7:width: 600px !important; /* IE7+FF */background:#fff; /* 对firefox有效*/ *background:#ccc; /* 对ie7有效 */ _background:#000; /* 只对ie6有效 */margin-top: 10px \9; /*IE8*/ 火狐浏览器:@-moz-document url-prefix() { #id{ display: block; } } /* Firefox

Css样式兼容IE6,IE7,FIREFOX的写法

根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别IE6与IE7:          background:green !important;background:blue;   区别IE7与FF:          background:orange; *background:green;   区别FF,IE7,IE6:          back

CSS hacker使用小结(兼容IE6、7、8)

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

兼容IE6浏览器的最大高度和最小高度css代码

兼容IE6浏览器的最大高度和最小高度css代码:IE6浏览器是不支持最大高度和最小高度属性的,下面就通过兼容性措施实现此功能.一.最大高度效果: .max_height{ max-height:400px; _height:expression(this.scrollHeight > 400 ? "400px" : "auto"); } 二.最小高度效果: .min_height{ min-height:200px; _height:expression(th

jQuery&amp;CSS 顶部和底部固定浮动工具栏 兼容IE6

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML