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

所属分类: 网页制作 / CSS 阅读数: 518
收藏 0 赞 0 分享

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

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

如果想系统的学习css hacker的相关资料,推荐查看这篇文章(https://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浏览器渲染页面需默认用极速内核
<!--[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兼容问题汇总:https://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圆角,阴影,文本阴影等效果。

附网址:https://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属性。

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多