css ie6 ie7 ff的CSS hack使用技巧
FF浏览器
.test{
height:20px;
background-color:orange;
}
IE7浏览器
*+html .test{/*IE7*/
height:20px;
background-color:blue;
}
IE6浏览器
*html .test{/*IE6*/
height:20px;
background-color:black;
}
通过上面的CSS代码可以看出FF还是最听话的浏览器。在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html。
这里就很好记忆了,IE6加*html,而IE7加*+html,暗示加了一个版本。
通过对class、id所做的CSS HACK好处在于不用顾及前后顺序,而且便于管理和其他人员接受,还可以通过这种HACK实现类似JS浏览器版本的控制。
相关推荐
-
仅在IE6/7/8下cssText返回值少了分号的测试代码
测试代码: IE6/7/8下cssText返回值少了分号 TEST var div = document.getElementsByTagName('div'); alert(div[0].style.cssText); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 各浏览器输出如下 IE6/7/8 : IE9/Firefox/Chrome/Safari/Opera : 可以看到IE6/7/8中少了分号.使用cssText属性时需注意.
-
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current
-
不同版本IE使用不同css(css条件注释语句用法)
一.条件注释简介1.IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.2.条件注释只能用于IE5以上.3.如果你安装了多个IE,条件注释将会以最高版本的IE为标准.4.条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们.5.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容.二.条件注释属性gt : greater
-
兼容ie、firefox的图片自动缩放的css跟js代码分享
需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset
-
css ie6 ie7 ff的CSS hack使用技巧
FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器.在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html. 这里就很
-
浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下
-
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width:
-
js判断IE6/IE7/FF的代码[XMLHttpRequest]
大家有的时候想在页面中加一些东东,又限于浏览器的不同,效果不尽都能表现出来,这下我们可以想到浏览器的判断,根据不同的浏览器给出不同的展示效果,是不是很炫呢?那当然,你能想到的很多人都能想的到,就好像大楚网的广告添加方法,真是让我见识到了真正的JS高手是如何练就的了,废话不说了,看代码: 复制代码 代码如下: if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 alert('Mozilla, Safari,IE7 '); if(!window.Ac
-
iframe 自适应高度[在IE6 IE7 FF下测试通过]
第一种方法: 复制代码 代码如下: <script type="text/javascript" language="javascript"> <!-- //调整 PageContent 的高度 function TuneHeight() { var frm = document.getElementById("content01"); var subWeb = document.frames ? document.frames
-
特牛的FF/IE6/IE7专用CSS HACK
这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class.id中属性的HACK,排列的顺序都具有要求.今天要和大家说的是针对class.id所做的CSS HACK. 复制代码 代码如下: .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20p
-
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容 网页布局+纯CSS纵向下拉菜单 *{ margin:0; padding:0; border:0; } html{ background:#bfc4c7;/*背景颜色*/ } body{ font:12px/150% '宋体'; margin:0 auto; width:770px; text-align:center; } #menu,#nav,#footer{ clear:both; } #nav{ padding-left:20px; t
-
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
纯CSS的下拉菜单 支持IE6 IE7 Firefox *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} .menu tab
-
去除链接元素的虚线框 兼容IE7、IE6、FF
推荐下面的代码 复制代码 代码如下: a {outline: none; /* for Forefox */ } a {star:expression(this.onFocus=this.blur()); /* for Ie*/ } 下面的代码比较麻烦 我们采用htc文件的办法来解决这个问题.首页将以下代码保存为link.htc文件. 复制代码 代码如下: <public:attach event="onfocus" onevent="hscfsy()"/&g
-
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码
随机推荐
- 如何实现歌曲在线点播?
- java(jsp)整合discuz同步登录功能详解
- Spring Boot 添加MySQL数据库及JPA实例
- js实现颜色阶梯渐变效果(Gradient算法)
- PowerShell脚本实现检测网络内主机类型
- PHP系统命令函数使用分析
- Zend Framework过滤器Zend_Filter用法详解
- 详解Python3中的Sequence type的使用
- Android源码解析之属性动画详解
- mysql中coalesce()的使用技巧小结
- 在Android中调用WebService实例
- 极致之美——百行代码实现全新智能语言第1/6页
- android WakeLock使用方法代码实例
- 简介JavaScript中getUTCMonth()方法的使用
- js window对象属性和方法相关资料整理
- 不用SEO 网站取得成功的经验探讨
- 不能在本地计算机启动 apache2.2解决方法
- PHP中new static()与new self()的比较
- CM域名开放注册受阻 米农仍对其锲而不舍
- jquery实现回车键触发事件(实例讲解)