登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Daisy

与其去诅咒黑夜,还不如去点亮一只蜡烛

 
 
 

日志

 
 

IE7、IE6和火狐兼容性问题  

2009-09-18 10:34:47|  分类: UI设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转载----------baoguoping的数字家园 

和火狐兼容性问题一、CSS HACK

 

以下两种方法几乎能解决现今所有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 闭合(非常重要)

 

关于 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>

 

三、其他兼容技巧(再次啰嗦)

 

1、FF下给 div 设置 padding 后会导致 width 和 height 增加,但IE不会。(可用!important解决)

2、居中问题。

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

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

3、若需给 a 标签内内容加上 样式,需要设置 display: block; (常见于导航标签)

4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。

5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明,以避免不必要的麻烦。(常见于导航标签和内容列表)

6、作为外部 wrapper 的 div 不要定死高度,最好还加上 overflow: hidden ,以达到高度自适应。

7、关于手形光标。 cursor: pointer ,而 hand 只适用于 IE。

8、至于IE5以及其他浏览器就没有必要兼顾了,在这上面花时间不值得。

 

下面这段可执行的码可以很形象的说明问题...当然前提是你有IE6 IE7和火狐浏览器...

不过我还是没有研究透...需要注意的是...在<body>标签里加了 lang="zh" 的定义...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5</title>

<style type="text/css">

<!--

 

#fx {

display: none;

border: 3px double #999;

width:300px;

height:200px;

padding:10px;

}

#ie6{

display:none !important;

display:none;/*ie5*/

font-size:54px;

border:10px solid #CCC;

padding:100px;

}

#ie6/**/{

display:block;

display /*ie5.5*/:none;

}

#ie7 {

display:block !important;

display:none;/*ie5 & ie6*/

background-color:#69f;

border:1px dashed #63c;

padding:50px;

width:200px;

height:150px;

 

}

*:lang(zh) #ie7{

display:none !important;

}

*:lang(zh) #fx{

display:block !important;

}

 

-->

 

#example{color:red ;}

* html #example{color:blue;}

*+html #example{color:green;}

</style>

</head>

 

<body lang="zh">

<div id="fx">这是在 FireFox 或者 Opera 下面的效果</div>

<div id="ie6">这是在 IE 6 下面的效果</div>

<div id="ie7">这是在 IE 7 下面的效果</div>

 

<div>以下为简单区分FF/IE6/IE7示例</div>

<div id="example">这行文字在FF下应为红色,在IE6下应为蓝色,在IE7下应为绿色。</div>

</body>

</html>

  评论这张
 
阅读(166)| 评论(1)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018