CSS HACK

先说明：这些是前段时间整理出来的

1、用!important来解决IE和其他浏览器的布局差别

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：
#footer

{

Margin:10px!/*FF*/Important;margin:5px;/*ie*/

}

在FF中浏览时候，能够理解!important的优先级，因此显示10px的边距；在IE中浏览时候，不能够理解!important的优先级，因此显示5px的边距。

2、关于超链接访问后hover样式的问题

解决超链接访问过后hover样式不显示的问题改变CSS属性的排列顺序:先后顺序标准应为：a:link—a:visited—a:hover—a:active

其中：

a:link设置对象在未被访问前的样式；默认值由浏览器决定。对于无href属性(特性)的a对象，此伪类不发生作用。

a:visited设置 a对象在其链接地址已被访问过时的样式;默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用;对于无 href属性(特性)的 a对象，此伪类不发生作用。

a:hover设置对象在其鼠标悬停时的样式。在CSS1中此伪类仅可用于a对象；对于无href属性(特性)的a对象，此伪类不发生作用；在CSS2中此伪类可以应用于任何对象。

a:active设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式；在CSS1中此伪类仅可用于a对象；对于无 href属性(特性)的 a对象，此伪类不发生作用；在CSS2中此伪类可以应用于任何对象；并且:active可以和:link以及:visited状态同时发生。

3、ul在Firefox和IE下表现不同
使用（padding:0;margin:0;list-style:inside;）或者（padding:0; margin:0;list-style:none;）

4、BOX模型在IE和FF中解释相差2PX的解决方法

参考1中!Important的方法，分别写出FF中和IE中的BOX样式，例如：

#box

{

Margin:100px!Important;/*FF*/ margin:120px;/*IE*/

}

5、FF中box的默认值问题

在ff中box默认居左，而IE中box默认是剧中的，解决的方法：

#Box

{

Margin:auto;

}

6、针对FF和IE5，IE5.5的CSS样式问题

FF与IE系列用!Important区分；IE6和IE5.5之间可以用属性后是否有一个空格来区分,例如：

{

＞background-color: black;
＞background-color : green;

}

IE6和IE5之间可以用：？

7、IE6的双倍边距BUG

解决办法是加上display:inline;

Display表示设置对象如何显示:其中inline是内联对象的默认值。将对象强制作为内联对象呈递。（强制不换行）

8、针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。一般解决的方法是：

#1 { color: #333; }/*FF*/

* html #1 { color: #666; }/*IE6*/

*+html #1 { color: #999; }/*IE7*/

在firefox下显示颜色为#333；在IE6中显示颜色为#666；在IE7中显示的颜色为#999；

9、块的最小宽度问题

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来用。

为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个类：

#div{Min-width:600px;

Width:expression(document.body.Width<600px?:"600px":"auto");}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

10、

A.写两句代码来控制一个属性，区别Firefox与IE：

background:orange; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

B.写两句代码来控制一个属性，区别IE7与IE6：

background:green !important;background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.

C.写三句代码来控制一个属性，区别Firefox，IE7，IE6：

background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

11、DIV的垂直居中问题

A.vertical-align:middle;

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

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

13、边距加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：
<#div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

14、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

例如：
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
      <div id="left"></div>
      <div id="right"></div>
</div>

15、IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

16、float的div闭合;清除浮动;自适应高度;
①例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 <#div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的div不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>
再嵌入一个float left而宽度是100%的DIV解决之
④万能float闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
/* 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 */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

14、高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。
例：
#box {background-color:#eee; }

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

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

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

15、如何对齐文本与文本输入框

加上 vertical-align:middle;
<style type="text/css">

</style>

16、li中内容超过长度时显示省略号的方法

此方法适用与IE与OP浏览器
    <style type="text/css">
    
    </style>

20、如何解决IE中不能设置滚动条颜色的方法

解决办法是将body换成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>

21、为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px；

其中overflow:是检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

22、FORM标签

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

23、为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的IE6 可以这样定义:
{
height:auto!important;
height:200px; /*IE会自动撑开高度*/
min-height:200px;

}

24、FF IE7 IE6区分最好的办法

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6 IE都认识**/
_height:20px; /*For IE6只有IE6认识*/

posted on 2010-08-17 08:55 基斯盐阅读(185) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

基斯盐的BLOG

CSS HACK

导航

公告