Hack技术
Hack技术
1、IE条件注释法,微软官方推荐的hack方式。
只在IE下生效
<!--[if IE]>
<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />
<![endif]-->
只在IE6以上版本生效
<!--[if gt IE 6]>
<link rel="stylesheet" href="/gt-ie6.css" type="text/css" media="screen" />
<![endif]-->
只在IE7上不生效
<!--[if ! IE 7]>
<link rel="stylesheet" href="/not-ie7.css" type="text/css" media="screen" />
<![endif]-->
非IE浏览器生效
<!--[if !IE]><!-->
<link rel="stylesheet" href="/no-ie.css" type="text/css" media="screen" />
<!--<![endif]-->
2、常用的css hack代码
样式属性前缀法
.csshack{
background:blue;
background:blue\9; /*all ie*/
background:blue\0/; /*ie8-ie9*/
background/*\**/: blue\9; /* ie7-ie8*/
*background:blue;/* or #background: blue */ /*ie6-ie7*/
+background:blue; /*ie7*/
_background:blue; /*ie6*/
}
选择符前缀法
/* IE 7 */
*:first-child+html{}
/* IE 7 */
html > body #ie7 { *display: block; }
/* IE 6 */
* html #div{ }
/* IE 6 */
body #ie6 { _display: block; }
/*IE7及其更低版本*/
*:first-child+html{}*html{}
/*IE7,IE7以上和主流浏览器*/
html>body{}
/*适合主流浏览器(IE7排除在外,IE7以下的也不行)*/
html>/**/body{}
/* Firefox 1 - 2 */
body:empty #firefox12 { display: block; }
/* Firefox */
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; } }
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
3、IE条件注释并不是只用于样式表文件,它还有其它的形式来进行Hack。
IE条件注释与style标签:
<!--[if IE 6]>
<style type="text/css"> /* css for IE 6 */ </style>
<![endif]-->
IE条件注释与script标签:
<!--[if IE 6]>
<script type="text/javascript"> alert("我是IE6"); </script>
<![endif]-->
IE条件注释与html标签:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
4、IE CSS Media
/* IE6/7 only (via Keith Clarke) */
@media screen\9 { }
/* IE8 (via Keith Clarke) */
@media \0screen { }
/* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {}
/* IE8/9/10 */
@media screen\0 { }
@media screen and (min-width:0\0) {
body { background: yellow; }
}
Hack技术的更多相关文章
- HTML兼容问题——HACK技术
有话先说:本文的目的主要是向大家描述一下我们在遇见IE8版本一下以及Firefox兼容的问题. 针对不同的浏览器写不同的CSS的过程,这就叫CSS hack,也叫写CSS hack,相信您会对一些比较 ...
- openwrt-智能路由器hack技术(2)---"网路信息监控和窃取"
openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1 导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所 ...
- openwrt-智能路由器hack技术(1)---"DNS劫持"
openwrt-智能路由器hack技术(1)---"DNS劫持" 1 导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整 ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera
转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...
- HTML的条件注释和hack技术
在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...
- HTML的条件注释及hack技术
在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...
- CSS Hack技术(一)
这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技 ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
随机推荐
- Java学习笔记(三)——运算符
一.运算符: 1.分类: 2.java中的运算符 (1)其中,++在左,表示先加了再用,++在右,表示先用了再加. (2)% 用来求余数,也称为"取模运算符" 3.赋值运算符 4. ...
- CSS 基本1
HTML元素可以分为两种: 块级元素 内联元素(行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显示修改元素的 display 属性),而内联元素则都会 ...
- HTML5_ScrollInToView方法
scrollIntoView(ture)元素上边框与视窗顶部齐平 scrollIntoView(false)元素下边框与视窗底部齐平 <html> <head> <tit ...
- 【POI xls】解析xls遇到的问题
问题1:Package should contain a content type part org.apache.poi.POIXMLException: org.apache.poi.openxm ...
- Uva 725 Division
0.不要傻傻的用递归去构造出一个五位数来,直接for循环最小到最大就好,可以稍微剪枝一丢丢,因为最小的数是01234 从1234开始,因为倍数n最小为2 而分子是一个最多五位数,所以分母应该小于五万. ...
- Ubuntu12.04安装搜狗输入法失败后,出现登录界面循环
前些天,因为复现别人实验就准备重新启用实验室的集群上的系统,上去安装了几个插件,之后又觉得需要中文输入法就试着装一下,结果安装失败,看到报错信息,也没放在心上,第二天启动时发现再也登录不进去. 现象描 ...
- 为什么网页通常把JS调用放在底部?
JS是单线程,浏览器是多线程.当我们在浏览器的地址栏里输入一个url地址,访问新页面时,页面展示的快慢是由一个单线程控制,这个线程叫做UI线程.UI线程会根据页面里资源(资源是html文件.图片.cs ...
- 转 : 用Delphi编写安装程序
http://www.okbase.net/doc/details/931 还没有亲自验证过,仅收藏 当你完成一个应用软件的开发后,那么你还需要为该软件做一个规范化的安装程序,这是程序设计的最后一步 ...
- 我的c++学习(5)switch语句详解
#include "stdafx.h" #include<iostream> using namespace std; #include<iomanip> ...
- java代码获知该方法被哪个类、哪个方法、在哪一行调用
public class TestMain { public static void main(String[] args){ hello(); } public static void hello( ...