部分CSS (Hack)

1.条件注释控制符

  !  [if ! IE]             "非"运算符  

  lt  [if lt IE 6]            小于

  lte   [if lte IE 6]            小于等于

  gt    [if gt IE 6]          大于

  gte  [if gte IE 6]           大于等于

  ( )    [if (lte IE 6)]         用于子表达式,配合布尔运算符

  &    [if(lte IE 9)&(gt IE 6)]     AND运算符

  |    [if (gt IE6)|(!IE)]    OR运算符

  如:<!--[if IE 6]>仅IE6可以识别<![endif]-->

    *   只能被IE浏览器识别

    IE 7 不但能识别 * 符号,还能识别   !important

    div{

      color : green;      //Firefox 中显示绿色

      color : red !important;  //IE7中显示红色

      *color : blue;      //IE6中显示蓝色   

    }

    IE能识别 *html 与 *+html,非IE浏览器不能识别

      div{ color : red; }      非IE显示红色

      *html div{ color : green; }   IE6  显示绿色  

      *+html div{ color : blue; }   IE7  显示蓝色 

    更多区分浏览器区分方法

      #ie6{ _display:block; }    IE6

      #ie7{ *+display:block; }    IE7

      #ie8{ display:block\0; }    IE8

      :root #ie9{ display:block\0; }    IE9 10

      

2.常用的属性前缀

  -webkit  webkit核型浏览器    Chrome     Safari 等

  -moz   火狐

  -ms    IE

  -o      Opera

如:旋转效果

  div{

    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    
-ms-transform:rotate(-3deg);     /* Internet Explorer */
    -moz-transform:rotate(-3deg);   /* Firefox */
    -webkit-transform:rotate(-3deg);   /* Safari 和 Chrome */
    -o-transform:rotate(-3deg);      /* Opera */

    transform:rotate(-3deg);      /* W3C无属性前缀,放于最后会覆盖前面带属性的前缀的定义 */
  }

3.IE6中浮动元素的双倍边距问题

  IE6中首个浮动到父元素边上的元素,如果有该方向的margin值,会以双倍显示。

  解决办法:为浮动元素添加属性     display:inline;

4.

  

时间: 2024-10-20 20:08:10

部分CSS (Hack)的相关文章

关于CSS Hack

由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,导致生成的不是我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,在不同的浏览器中也能得到我们想要的页面效果. 简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器.当然,我们也可以反过来利用CSS hack为不同版本的浏览

Css Hack 大全(IE6、IE7、IE8、IE9 css hack)

一.IE6 css hack: 1. *html Selector {} /* Selector 表示 css选择器 下同 */ 2. Selector { _property: value; } /* property: value 表示 css 的属性名: 属性值 下同 */ 3. Selector { _property/**/: /**/value; } 4. Selector { -property: value; } /*IE6 css hack常用习惯推荐使用下划线_ */ 二.I

CSS hack技术

首先我们要了解一个概念CSS hack 不同浏览器,比如IE6.IE7.IE8,Mozilla Firefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样. 这个时候我们就需要针对不同的浏览器去定义不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack. CSS Hack的原理:由于不同的浏览器对CSS的支持及解析结果不同以及CSS中

CSS hack

什么是hack? 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack! 目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个ie浏览器对代码的兼容性问题.在很多情况下,我们需要专门针对IE写css样式,即针对IE的css hack,下面我各个网站的查询收集的内容: 常见的特殊符号的应用: IE6: _selector{property:value;} selector{property:valu

CSS hack方式

史上最全的CSS hack方式一览 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的C

CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera

转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩的网络世界,而浏览器则是我们欣赏网络世界的窗口. 以前,浏览器主要有IE和NetScape两家:到现在,各种各样功能强大的浏览器层出不穷.例如:举世闻名的浏览器有Chrome.FireFox.Safari.Opera,常见的"国产"浏览器有遨游.QQ.360.搜狗.UC.世界之窗. 由于不

IE css hack整理

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的

css hack ie

发表于 2014年04月9日 by 愚人码头 被浏览 25,762 次 小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握.. 有IE就有hack,看看IE9的css hack,IE8的css hack:上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题.悲剧了赶紧找IE10的hack. google上翻到的IE10 CSS Ha

常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 总结一下我编写代码的时候遇到的浏览器兼容问题,跟大家学习. 一.解决无法在IE6下面设置1px高的容器(div)的问题. 大家看看这一段代码: <div style="height:1px;wi

史上最全的CSS hack方式一览

做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应