HACK技巧

时间 2019-12-07

标签 hack 技巧繁體版

原文原文链接

CSS HACK技巧

关于CSS对各个浏览器兼容已是老生常谈的问题了, 网络上的教程遍地都是.如下内容没有太多新颖, 纯属我的总结, 但愿能对初学者有必定的帮助. css

1、CSS HACK html

HACK概念：浏览器

不一样的浏览器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不同，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。这个针对不一样的浏览器写不一样的CSS code的过程，就叫CSS hack, 网络

HACK规则： app

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

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

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

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

IE6 IE7 FF firefox

* √ √ ×

!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">

2、万能 float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]

将如下代码加入Global CSS 中,给须要闭合的div加上 class="clearfix" 便可,屡试不爽.

<style>

/* Clear Fix */

.clearfix:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix

{

display:inline-block;

}

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

</style>

3、其余兼容技巧

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. IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，

而在IE6和其余浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。

这时咱们能够作以下修改div{width:300px!important;width :340px;margin:0 10px 0 10px}

关于这个是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的话，请告诉我一声，谢了！：）

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

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

5. cursor

cursor: pointer 能够同时在 IE FF 中显示游标手指状， hand 仅 IE 能够

6. 文字过长

若是文字过长，则将过长的部分变成省略号显示：IE5，FF无效，但能够隐藏，IE6有效<DIV STYLE=“width：120px；height：50px；border：1px solid blue；overflow：hidden；text-overflow：ellipsis”> <NOBR>就是好比有一行文字，很长，表格内一行显示不下。Phontol.com</NOBR>

固定宽度汉字截断：overflow：hidden；text-overflow：ellipsis；white-space：nowrap；（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。

7. min-

IE不认得min-这个定义，但实际上它把正常的width和height看成有min的状况来使。这样问题就大了，若是只用宽度和高度，正常的浏览器里这两个值就不会变，若是只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

好比要设置背景图片，这个宽度是比较重要的。要解决这个问题，能够这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

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

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

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

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

10. 为何FF下文本没法撑开容器的高度

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

{

height:auto!important;

height:200px;

min-height:200px;

}

11. 清除浮动

.hackbox{ display:table; //将对象做为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，一般和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0如下的版本都隐藏,FF和OPera做用

属性选择器和子选择器仍是有区别的,子选择器的范围从形式来讲缩小了,属性选择器的范围比较大,如p[id]中,全部p标签中有id的都是一样式的.

10 IE捉迷藏的问题

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

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

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

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。

例：

<p>p对象中的内容</p>

</div>

CSS：#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

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

1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 须要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

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

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

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

7.cursor: pointer 能够同时在 IE FF 中显示游标手指状， hand 仅 IE 能够

8.FF: 连接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了不底边显示错位, 若不设 height, 能够在 menubar 中插入一个空格。

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

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

注意这两个margin的顺序必定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器能够识别。因此在IE下其实解释成这样：

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

重复定义的话按照最后一个来执行，因此不能够只写margin:XXpx!important;

10.IE5 和IE6的BOX解释不一致

IE5下

div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其余浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时咱们能够作以下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的话，请告诉我一声，谢了！：）

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值因此先定义

ul{margin:0;padding:0;}

就能解决大部分问题

注意事项：

1、float的div必定要闭合。

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

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

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

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

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

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

在

<#div class="floatB"></#div>

<#div class="NOTfloatC"></#div>

之间加上

<#div class="clear"></#div>

这个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 */}