HTML的条件注释和hack技术
在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新。整个前端圈子都沸腾起来,和今年七月份Adobe宣布计划终结 Flash一样,都是IT届的头等大喜事。
但针对一些还在用IE的人来说,或者一些故意刁难问IE兼容的HR来说,确实是个难题,这里列举一些兼容的方法
第一种,比较笨,但很有效果:条件注释
注释内容以样式为例,如下:
1、支持所有IE浏览器
<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]-->
2、支持非IE浏览器
<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]-->
或
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
3、仅仅支持IE10
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
4、仅仅支持IE9
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->
............只想支持单一的某个IE版本,就和上述方法一样
5、支持IE10以下版本(IE9以及IE9以下版本)
这种方法是样式表使用在低于IE10的浏览器,换句话说除了IE10以外的所有IE版本都将被支持。
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
也可以写成
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
前面我们也说过了lt和lte的区别,lt表示小于版本号,不包括条件版本号本身;而lte是小于或等于版本号,包括了版本号自身。
6、支持IE9以下版本(IE8以及IE8以下版本)
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css">
<![endif]-->
或:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css">
<![endif]-->
............只想支持某个IE版本以下的方法,就和上述方法一样
上面8——11这几种方法,使用的是低于(lt)和低于或等于(lte)的方法来判断,我们也可以使用大于(gt)和大于或等于(gte)达到上面的效果:
7、高于IE9的版本(IE10以及IE10以上版本)
<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
或:
<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
............只想支持某个IE版本以上,就和上述方法一样
9、高于IE5.5的版本(IE6以及IE6以上版本)
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css">
<![endif]-->
或:
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css">
<![endif]-->
注:以上 内容来自浏览器兼容之旅的第一站:如何创建条件样式,转载请注明,谢谢...
以上内容转载并选择摘录内容
对上文的一点补充:
10、指定多种IE版本
<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]-->
第二种,使用hack技术,妥妥的,比较,每次判断都重新写内容,特别的麻烦,这时,针对css兼容的hack技术出行了(以下内容为原创)
例子1:
_background-color:green;/*给IE6用的*/
* /*给IE6/7用的*/
/*给IE8-11 用的*/
/*给IE 6-10用的*/
width:400px\9;/*以上的hack技术几乎适用于所有属性*/
例子2:
块级元素的inline-block 在IE6/7下无效
解决:1.不用
2.添加 *display:inline * zoom:1;
并在一行的时候尽量不要使用
例子3:
IE6下会出现出现双倍边距问题
同方向浮动margin会产生双边距
解决:给浮动元素添加属性 display:inline
例子4:
图片存在下边距问题
在任何图片下都会有3px的间距
解决方法:1.给图片添加display:block;
2.给图片添加vertical-align:top (| middle | bottom)
例子5:
高版本的input表单中的默认图标
/*
css-hack技术解决高版本IE默认图标问题
*/
::-ms-clear{ display:none; }/*text input表单*/
::-ms-reveal{ display:none; }/*password input表单*/
例子6:
/*
定位属性的单像素问题
在IE6中如果绝对定位的参考元素(有定位属性的父级)
是单数的情况下
解决:1.不要使用单数
2.使用css-hack技术:_属性:值 给IE6使用
*/
例子7:
/*
li中有元素具有浮动属性时 会产生下边距
解决:给li元素元素标签添加属性vertical-align:top
*/
例子8:
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
最后,还有就是css3新属性中一些不稳定的属性值,应该在前面添加前缀
-webkit- 属于chrome浏览器和safari浏览器的私有属性,也是浏览器内核
-moz- 属于firefox的私有属性
-ms- 属于IE浏览器的私有属性
-o- 属于opera的私有属性
当然,除了以上的css的兼容方法,一定还有很多我不为所知的更好的兼容方法。希望知道的大神都能留下你们的足迹和你们所知道的方法,谢谢!!
我们的目标是:哈哈!
HTML的条件注释和hack技术的更多相关文章
- HTML的条件注释及hack技术
在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...
- ie10 css hack 条件注释等兼容方式整理
点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来 ...
- HTML中的Hack手段之条件注释
通常WEB的好处就是可以跨平台,但这个世界偏偏有个另类,就是IE浏览器.在平常做HTML设计时,有时需要为IE的表示差异而不得不使用一些Hack手段.条件注释就是这类手段之一. 条件注释是IE浏览器的 ...
- HTML中的Hack条件注释语句
IE 条件注释判断语句是 IE 特有的功能,通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容 自IE10起,标准模式不再支持条件注释 条件注释语句中可以是HTML.CSS也可以是 ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- Hack技术
Hack技术 1.IE条件注释法,微软官方推荐的hack方式. 只在IE下生效 <!--[if IE]> <link rel="stylesheet" href= ...
- 关于HTML条件注释你可能不知道的一些事儿
最近经常看到类似这样的HTML代码片段,很多前端开发人员应该都熟悉: 1 <!--[if lt IE 7]> <html class="ie6"> ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)
前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...
随机推荐
- Spring Cloud Alibaba (nacos 注册中心搭建)
[nacos下载地址](https://github.com/alibaba/nacos/releases) ### 什么是 Nacos? - nacos主要起到俩个作用一个是注册中心,另外一个是配置 ...
- Spring Boot2 系列教程(十七)SpringBoot 整合 Swagger2
前后端分离后,维护接口文档基本上是必不可少的工作. 一个理想的状态是设计好后,接口文档发给前端和后端,大伙按照既定的规则各自开发,开发好了对接上了就可以上线了.当然这是一种非常理想的状态,实际开发中却 ...
- 玩转OneNET物联网平台之HTTP服务③ —— OneNet智能灯 HTTP版本
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- 玩转OneNET物联网平台之MQTT服务⑦ —— 远程控制LED(数量无限制)+ Android App控制 优化第一版
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- Java面试题---基础篇
经常阅读一些牛人的基础博以及相关个人经历,你才发现自己真的不够努力,人生路漫漫,希望本人以及看客能走出一条自己不后悔的人生路,骚年 加油!!! 回归正题 一 java基础知识点 1)java面向对 ...
- 媒体查询文字大小.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 请求图片方法
node的每一个文件,都是一个域,那么里面所有的变量都不允许被外界引用,除非导出.要使用外界的变量,也必须使用导入的方式来导入.import 文件路径. css可以直接使用import +文件路径导入 ...
- 本地客户端(自己的电脑)连接远程Oracle数据库(服务器端),客户端安装步骤
如果本地自己的电脑没有安装Oracle(服务器端数据库),那就要单独安装HA-Instant Client-v11.2.0.3.0.exe(oracle_client客户端) 如果本地安装了Oracl ...
- Java自动化测试框架-06 - 来给你的测试报告化个妆整个形 - (下)(详细教程)
简介 经过上一次的化妆和整形,有客户提出需求能不能将那个普通会员的套餐再升级一下,再漂亮一点.所以这次咱们就来看看从哪里下刀可以使它变得再漂亮一点点. 上一篇文章修改了一些基本的ReportNG信息, ...
- pymssql的Connection相关特性浅析
关于Python的pymssql模块,之前研究时总结了"pymssql默认关闭自动模式开启事务行为浅析"这篇博客,但是在测试过程中又发现了几个问题,下面对这些问题做一些浅析,如有不 ...