zoukankan      html  css  js  c++  java
  • <![if IE]><style></style><![endif]>

    CSS hack就是为了让你的CSS代码兼容不同的浏览器,其中最难对付的就是IE浏览器的兼容性,因为它的版本很多,不过还好,微软发表声明已经不对IE8以下的版本进行维护了。但是我们也不能就认为不用学IE8之前版本的兼容性了。反过来,如果我想在IE浏览器中让元素表现出另外一种样式,我也可以通过CSS hack来实现,所以这招人烦的IE兼容性也可以为自己所用。总之,多学点没有坏处。

    CSS hack通常分为 条件Hack、属性hack、选择符hack。下面一一来介绍:

    1、条件hack::

    表现形式:

      <!--[if  lte  IE 6]>

          <style  type="text/css">

              div{color:red;}

          </style>

         <![endif]-->.

    这是一个选择语句,只不过是在特定浏览器下执行。这个语句表明在IE6及6以下版本的IE浏览器中,div中字体的颜色是红色。其中lte表示 Less than or equal to(小于或等于)的简写。既然有小于等于那也可能会有greater or equal to大于等于(gte),gt(大于);lt(小于);如果我想表示样式只对某个版本的IE浏览器才有效,这个语句又该怎么写呢?下面这个语句表明只有在IE8版本的IE浏览器下,div的背景颜色为#ccc;

    <!--[if  IE 8]>

        <style   type="text/css">

            div{background:#ccc;}

         </style>

    <![endif]-->

    那如果我想表示除了某个版本IE浏览器,其余的浏览器都能表现这个样式又该怎么写呢?

    <!--[if ! IE 8]>

      <style  type="text/css">

          div{box-sizing:content-box;}

      <style>

    <![endif]-->

    表明除了IE8之外的所有IE浏览器中,div所占页面的实际尺寸的计算是content+padding*2+border*2;

    2、属性hack::

    属性hack是指通过只有自己才能识别的出的符号添加在属性的前面,比如,

    IE都能识别*  标准浏览器(例如火狐)不能识别*
    IE6能识别*,但不能识别  !important
    IE7能识别*,也能识别 !important
    火狐不能识别*,但能识别!important

    只有IE6能识别下划线“_”;

    只有IE7能识别 *+

    element{_color:#f7f7f7f;}只有IE6能识别,所以在IE6中字体颜色为#f7f7f7;

    element{*color:#f7f7f7;}IE6和IE7都能识别;

    element{color:red !important;}IE7和火狐浏览器能识别;

    3、选择符hack

    *+element{color:red;}只有IE7才能识别;

  • 相关阅读:
    字符串实现变量映射
    纯css实现无限嵌套菜单
    flex布局嵌套之高度自适应
    easy ui 零散技巧
    js高级应用
    前端利器
    css高级应用及问题记录(持续更新)
    兼容性验证方案
    原生js判断元素是否可见
    vue-cli webpack躺坑之旅
  • 原文地址:https://www.cnblogs.com/novice007/p/6910441.html
Copyright © 2011-2022 走看看