CSS HACK技巧

来源：互联网发布：小米note内存优化编辑：程序博客网时间：2024/06/05 10:04

CSS HACK技巧

一、CSS HACK

HACK概念：

不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,

HACK规则：

IE6

IE7

√

!important

√

IE都能识别*; 标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

浏览器优先级别:FF<IE7<IE6, CSS hack书写顺序一般为FF IE7 IE6

例：　以: " #demo {width:100px;} "为例;

　　 #demo {width:100px;}

　　 * html #demo {width:120px;}

　　 *+html #demo {width:130px;}

　　 ---------------

　　所以最后,#demo的宽度在三个浏览器的解释为:

　　FIREFOX:100px;

　　 ie6:120px;

　　 ie7:130px;

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

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<style>

#wrapper

{width: 100px!important; /* IE7+FF */

width: 80px; /* IE6 */}

</style>

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

<style>

#wrapper

{#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 fixed */

*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */

}

</style>

注意:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class="clear" 即可,屡试不爽.

三、其他兼容技巧

ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。所以先定义ul{margin:0;padding:0;}就能解决大部分问题。也可用!important解决

2. 居中问题.

1).垂直居中.将 line-height 设置为当前div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)

2).水平居中. margin: 0 auto;(当然不是万能)

你可以把html的body之内任何项目置居中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下：

body {

text-align: center;

}

#content {

text-align: left;

width: 700px;

margin: 0 auto;

}

对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值：text-align: left

3. FORM标签与ul 标签的事先声明

这2个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

4. cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

5. 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果

6. 为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

{height:auto!important;

height:200px;

min-height:200px;

}

7. IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

/*IE与Firefox的CSS兼容大全*/

1.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

2.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

3.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

4.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

5.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。

6.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{margin:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

7.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

就能解决大部分问题

注意事项：

1、float的div一定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;)

这里的NOTfloatC并不希望继续平移，而是希望往下排。

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。

在

之间加上

这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可：

.clear{ clear:both;}

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如：

<#div id="imfloat"></#div>

相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

3、关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

5、最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下

.tabd1{

background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

0 0