css中的hack
CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏 览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别,所以此样式 在IE6中实际设置对象的宽度为200px,后面的把前面的给覆盖了,而其他浏览器不识别_width不会执行_width:200px;这句样式,所以 在其他浏览器中设置对象的宽度就是300px;
以下是引自百度文库的定义
注意:我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器(chrome)、火狐(Mozilla Firefox)即可,至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核,所以只需要兼容以上浏览器即可兼容TT\傲游浏览器。
CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题,如margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍,也就 是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px,而在非ie6中显示的距左侧对象的距离是设置的值20px;所以 要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为:.kwstu{margin- left:20px;_margin-left:20px;}。
从上图可以分析出以下几种情况:
2.\9 :所有IE浏览器都支持
3._和- :仅IE6支持
4.* :IE6、E7支持
5.\0 :IE8、IE9支持,opera部分支持
6.\9\0 :IE8部分支持、IE9支持
7.\0\9 :IE8、IE9支持
background:blue;/*非IE背景蓝色 因为所有浏览器都能解释*/
background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别,覆盖上面样式 IE10跟11应该不识别,IE11测试确定*/
}
【区别符号】:“\9”、“*”、“_”
background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
*background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
_background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
}
明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器
正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、
Safari等)。
【区别符号】:“*”、“_”
background:blue;/*Firefox背景变蓝色*/
*background:black;/*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}
【区别符号】:“*”、“!important”
background:blue;/*Firefox背景变蓝色*/
*background:green!important;/*IE7背景变绿色*/
*background:orange;/*IE6背景变橘色*/
}
【区别符号】:“*”、“!important”
background:blue;/*Firefox背景变蓝色*/
*background:green!important;/*IE7背景变绿色*/
}
【区别符号】:“*”、“_”
*background:black;/*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}
【区别符号】:“!important”
background:black!important;/*IE7背景变黑色*/
background:orange;/*IE6背景变橘色*/
}
【区别符号】:“_”
background:black;/*Firefox背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}
color:#666\9; //IE8 IE9
* color:#999; //IE7
_color:#EBEBEB; //IE6
}
可以看出,利用字符识别无法区分IE8和IE9,我们可以从伪类的识别来区分
color:#666\9; //IE8
* color:#999; //IE7
_color:#EBEBEB; //IE6
}
:root element{color:#666\9;}//IE9
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} //Firefox
//Webkit
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.element{color:#444;}
}
//Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.element{color:#336699;}
}
color:#000; /*w3c标准*/
[;color:#f00;]; /*Webkit(chrome和safari)*/
color:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/
}
:root .element{color:#0f0\9;} /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}} /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/
css中的hack的更多相关文章
- css中的!important作用
css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...
- CSS中兼容的一面-----Hack
国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...
- css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程
一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...
- css中hack是什么
css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...
- CSS中一些常见的兼容性问题
CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...
- HTML+CSS中的一些小知识
今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
- CSS中加号、星号及其他符号的作用
在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好.不幸的是, 我们并不是生活在理想的世界里,浏览 器们布满了BUG和不一致.创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法 ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- @angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...
- CSS 文本实例
1.设置文本的颜色 color:red; color:#00ff00 color:rgb(0,0,255) 2.增加或减少字符间距 letter-spacing:-0.5em letter-spaci ...
- 201621123014《Java程序设计》第九周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 答: 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题集题目) 1.1 实验总结.并回答: ...
- 排序算法 java实现2
继续排序算法 4.冒泡排序 从第一个开始,跟后面一个数比较,如果比后面大就交换位置,这样没完成一轮,就可以把最大的选出来 public static <T extends Comparable& ...
- UVA 11605 Lights inside a 3d Grid
#include <iostream> #include <stdio.h> #include <cstring> #include <math.h> ...
- 「BZOJ2510」弱题(矩阵乘法,降维)
有M个球,一开始每个球均有一个初始标号,标号范围为1-N且为整数,标号为i的球有ai个,并保证Σai = M. 每次操作等概率取出一个球(即取出每个球的概率均为1/M),若这个球标号为k(k < ...
- axios 请求报错
报错如下: 解决:axios的请求配置中的baseURL配置错误,修改好即可. 报错前: baseURL: "192.168.30.220:3000", 解决后:baseURL: ...
- 查看.Net Framework版本号
目录 摘要 .NET Framework 的版本 确定计算机上安装的 .NET Framework 版本 补充几个查看.Net Framework版本号 概要 本文描述如何确定计算机上安装的 Micr ...
- CF 949C Data Center Maintenance——思路+SCC
题目:http://codeforces.com/contest/949/problem/C 可以想到可能是每组c有连边的可能. 但别直接给c1.c2连边,那样之后会变得很不好做. 可以把一些限制放在 ...
- laravel的批量插入
在日常开发中,用到批量插入的操作还是挺多的.记得很早很早以前,我还是在循环中写sql插入,结果被项目经理按在地上摩擦.好吧,性能这东西,用不到的时候还好,万一性能成为瓶颈,那代码优化,数据库优化就首当 ...