威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

FF、IE7、IE6的CSS hack问题

由于各个浏览器的特性都不一样,所以CSS在各个浏览器下出现兼容问题,所以本文列出非常有用的CSS hack,FF、IE7、IE6下CSS Hack的的对比。
FF、IE7、IE6的CSS hack问题

最近在仿一套我认为非常经典的皮肤,这套皮肤是一套非常具有立体感的皮肤,我第一眼看到他之后就非常的喜欢,很想把它弄到PJBlog上来,策划了好几天,他的机构有些特别,对于背景的定义应该说得有5个,顶部2个,底部2个,中间背景。

首先得考虑PJBlog对于这些背景的定义,安排了很久,终于基本合理的安排了背景的定义。

为什么背景难定义呢?首先,图片的repeat问题,顶部和底部都有,顶部图片,底部图片,中间背景。

repeat与fixed属性的不同,这个很简单,自己试验一样就知道了,相对运动与相对静止。

言归正传,还是说FF、IE7、IE6的CSS hack问题。(标准标准,什么是标准?)

应为这套皮肤对于定位有着严格的要求,歪一点点都不行,所以不得不用到一些CSS Hack来解决。

1、!important

IE7和FF下都支持!important 的,可以用!important来区分FF、IE7和IE6的高度。

.content{background:#f00;height:100px !important;}/* FF+IE7 */

.content{background:#f00;height:200px;}/* IE6 */

2、IE6/IE7对FireFox

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

.content{background:#f00;height:100px;}/* FF */

*html .content{background:#f00;height:200px;}/* IE6 */

*+html .content{background:#f00;height:300px;}/* IE7 */

height:50px; /*FF*/

*height:100px; /*For IE7 & IE6*/

_height:150px; /*For IE6*/

同样可以用相同的原理来为IE6、IE7、FF设置不同的width,height,margin,padding等属性。

3、区别不同浏览器,Css hack写法:

区别IE6与FF:

background:orange; *background:blue;

区别IE6与IE7:

background:green !important; background:blue;

区别IE7与FF:

background:orange; *background:green;

区别FF,IE7,IE6:

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

还有就是使用时的排序问题,我认为:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

增加IE8的CSS Hack IE6,IE7,IE8,Firefox css hack对照表

皮肤抢先预览,此皮暂时只在IE7,IE8,FireFox完美呈现,IE6有点小问题,还在研究中! 想看原来的网站么,请点这里~

您可能还会对这些文章感兴趣!

FF、IE7、IE6的CSS hack问题:目前有 4 条评论

  1. 青春挽歌
    4楼
    青春挽歌:360安全浏览器 Windows XP

    相当的棒!威哥相当的有才!赞

    William 于 2009-07-30 01:24 AM 回复

    呵呵,多谢夸奖~

    2009-07-29 19:09 回复
  2. 快乐臭虫
    地板
    快乐臭虫:Firefox 7.0.1 Windows 7

    这个立体感真的很强!

    William 于 2009-07-27 02:01 PM 回复

    恩,是的。

    2009-07-27 09:31 回复
  3. 晓哲
    板凳
    晓哲:Google Chrome 26.0.1410.64 Windows 7

    威哥啊,这皮很棒啊,能不能让我们看看原来的样子啊~就是你仿的站的地址啊~

    William 于 2009-07-27 02:01 PM 回复

    呵呵,刚刚忘记放了,已经添加了~

    2009-07-26 20:21 回复
  4. 海天无影
    沙发
    海天无影:搜狗高速浏览器 Windows XP

    现在用的吗 是还不错~

    William 于 2009-07-26 05:03 PM 回复

    呵呵,不是现在用的。。。还在设计中呢~

    2009-07-25 17:43 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry