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才能识别;

<!--[if IE]><style></style><![endif]-->的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Python安装包报错:PackagesNotFoundError: The following packages are not available from current channels

    以安装SimpleITK包为例,安装时,显示下图错误 conda install SimpleITK 按以下操作完成包安装 anaconda search -t conda SimpleITK #查询 ...

  2. laravel中{{}}和{!! !!}的区别详解

    {{}}支持转义 一段html代码只是被当成普通的字符串输出 {!! !!} 不支持转义 一段html代码可以被正常的解析 public function html(){ $address=" ...

  3. thinkphp 框架自带搜索+分页+搜索标红

    ..........控制器方法 public function index() { //接受搜索关键字 $word=input('word'); $where=[]; if (!empty($word ...

  4. laravel 终端命令

    创建模块及控制器

  5. php 23种设计模型 - 享元模式

    享元模式 享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式. ...

  6. phpstrom配置Xdebug

    采用的是PhpStrom+Xdebug+QQ浏览器(其他浏览器也可以,个人喜好) 1.下载适合的Xdebug插件 下载地址https://xdebug.org/download.php 不知道选用哪个 ...

  7. java控制流学习

    java流程控制学习 Scanner对象 概念 1.通过Scanner类实现程序和人的交互,通过它获取到用户的输入.java.util.Scanner是java5的特征. 我们可以通过Scanner类 ...

  8. AC+AP组网无线WiFi网速超慢延迟卡顿问题解决

    AP是什么? AP是Access Point的简称,即无线接入点,其作用是把局域网里通过双绞线传输的有线信号(即电信号)经过编译,转换成无线电信号传递给电脑.手机等无线终端,与此同时,又把这些无线终端 ...

  9. 『现学现忘』Docker基础 — 23、使用Docker安装Tomcat

    目录 步骤1:搜索镜像 步骤2:下载Tomcat镜像 步骤3:运行Tomcat镜像 步骤4:本机和外网测试 步骤5:解决问题 补充:--rm选项 步骤1:搜索镜像 使用docker search命令进 ...

  10. [源码解析] TensorFlow 分布式环境(1) --- 总体架构

    [源码解析] TensorFlow 分布式环境(1) --- 总体架构 目录 [源码解析] TensorFlow 分布式环境(1) --- 总体架构 1. 总体架构 1.1 集群角度 1.1.1 概念 ...