ECSHOP兼容CSS样式在FF、IE7、IE6中的不同表现

ECSHOP教程 来源: ECSHOP教程网www.ecshop119.com 时间:2012-05-27 ECSHOP教程分类:其他ECSHOP教程

1. !important
随着IE7对!important的支持,现在IE7和FF都支持!important,可以用!important来区分FF、IE7和IE6的高度。

用法如下:

<style rel="stylesheet" type="text/css"> <!-- .content{background:#a5a5a5;height:100px !important;} .content{background:#a5a5a5;height:200px;} --> </style>

 

2.IE6/IE7对FireFox

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

用法如下:

<style rel="stylesheet" type="text/css"> <!-- .content{background:#a5a5a5;height:100px;} *html .content{background:#a5a5a5;height:200px;} *+html .content{background:#a5a5a5;height:300px;} --> </style>

 

height:50px; *height:100px; _height:150px;

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

 

3.min-height

IE不认min-height,FF识别,利用以上这些属性,我们可以这样定义最小高度

 

<style rel="stylesheet" type="text/css"> <!-- .content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;} --> </style>

 我是这样理解这段代码的:

因为在IE里(包括IE6,IE7)认为height就是最小高度,当content中的内容超出设置的高度时,在FF中可以用min-height设置最小高度××,这时即使超出content的高度,背景颜色也会自动延伸下去。但IE不识别min-height,所以要加hack(对程序所作的修改,在尚未被开发者接受并集成到正式版本中之前被称为hack)。

 

4.区别不同浏览器,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;

本文模板屋原创地址: https://www.ecshop119.com/ecshopjc-815.html
模板屋版权所有 © 转载时必须以链接形式注明出处!

ECSHOP模板屋
ecshop开发团队 ecshop开发中心 ecshop模板制作 ecshop模板屋
ECSHOP
ecshop下载 ecshop安装教程 ecshop在线演示 ecshop后台测试
ECSHOP二次开发手册
ecshop教程 ecshop二次开发 ecshop模板教程 ecshop微信配置
ECSHOP商城网站建设
ecshop空间域名 ecshop商城建设 ecshop模板修改 ecshop开发定制
服务支持:7X24小时 151 059 55077
ECShop二次开发
ecshop搭建
qqtelcodeback_top
温馨提示

确定取消
温馨提示

关闭