今天才知道css hack是什么
先来个冷笑话:一晚下班回家,一民警迎面巡逻而来。突然对我大喊:站住! 民警:int类型占几个字节? 我:4个。 民警:你可以走了。 我感到很诧异。 我:为什么问这样的问题? 民警:深夜还在街上走,寒酸苦逼的样子,不是小偷就是程序员
作为一个后端程序员,之前知道的css都是皮毛,因为有专业的美工帮我们做静态页面,我们只需要做好页面数据填充,专心写逻辑代码。现在有一种想去从事web前端开发了,尽管知道一些js的主要概念,原型,原型链,上下文,闭包之类的,但貌似都不是很深入,想想还是先从css开始吧,有时候很简单的某些样式却总是写的很痛苦。所以今天就看了css手册,点滴积累吧。
什么是css hack
我自己的理解定义,就是针对不同的浏览器在对某些css属性做解析的时候出现的差异,我们去coding css这些差异的过程。看了css hack知道有
1.条件hack
<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->
<keywords>取值有
空
lt 小于
gt 大于
gte 大于或等于
lte 小于或等于
! 非
<version>取值有
可以是6/7/8/9...
例如 以下表示浏览器是小于ie7的:
<!--[if lt IE 7]>
<style>
.test2{width:100px;height:100px;background:blue}
</style>
<![endif]-->
以下例子是ie7的,这个是有效果的:
<!--[if IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->
2.属性级hack
代码如下:
#test{
color:#c30; /* For Firefox */
color:red\0; /* For Opera */
color:yellow\9; /* For IE8+ */
*color:blue; /* For IE7 */
_color:#ccc; /* For IE6 */
}
3.选择符级hack
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
还有一点小知识是让一个内联元素可以设置宽高 目前知道有display:block/inline-block 或者设置position:absoulte或者设置float等
最后 -music
白天总是很忙
晚上总很慌
都说前面有光
谁能给谁方向
看起来他和她似乎都很风光
低头承认渺小不如坚强上场
每天问问自己
是否尽全力
不学百般心机
过程是奖励
你一直站在光能照到的地方
只要相信自己其实每个人都一样
多一个人和你分享
少一点难自己肩扛
我们都是笨小孩但不忘挺起胸膛
多一个人和你分享
少一点难自己肩扛
相信自己迟早会发光发亮
每天问问自己
是否尽全力
不学百般心机
过程是奖励
你一直站在光能照到的地方
只要相信自己其实每个人都一样
今天才知道css hack是什么的更多相关文章
- 说说css hack,说真的,我也是才去了解这个东西
之前在很多地方看到css hack,今天狠下心,看看到底是什么鬼,所有我去百度了,然后看了一篇文章,然后写个小总结. css hack就是通过加一些特定的符号,不同的浏览器可以识别特定符号的样式,以此 ...
- 【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
- CSS hack方式一览【转】
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- CSS hack前传——背景图片全屏
在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- [转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 转 CSS hack:针对IE6,IE7,firefox显示不同效果
CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF: ...
- CSS Hack(转)
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
随机推荐
- 《Linux Device Drivers》第十六章 块设备驱动程序——note
基本介绍 块设备驱动程序通过主传动固定大小数据的随机访问设备 Linux核心Visual块设备作为基本设备和不同的字符设备类型 Linux块设备驱动程序接口,使块设备最大限度地发挥其效用.一个问题 一 ...
- 如何更改IE查看源代码菜单使用的HTML编辑器
一:打开注册表。 二:打开"HKEY_CURRENT_USER/SOFTWARE/MICROSOFT/INTERNET EXPLORER"或"HKEY_LOCAL_MAC ...
- Javascript作用域问题的构造函数的变量
构造函数new对于使用.代表创建对象.此外,它可以被用作普通的函数调用,因为它也是一个功能. function Person(name) { this.name=name; } Person(12); ...
- 部署Redis主-从
Redis主-从部署实践 0. 前言 这篇文章简要介绍Redis的主从部署,实现了一主二从,使用两个哨兵监控,以实现简单的HA,其中从库作为备机. 1. 部署 这里有三台服务器,其中239主机上的Re ...
- WebStorm的compass配置
在webstorm中配置compass WebStorm是功能强大的前端开发专用IDE,拥有即时编辑(chrome).自动完成.debugger.Emmet.HTML5 支持.JSLint.Less. ...
- rabbitmq的java简单的实现
1,安装rabbitmq.我的是ubuntu14.04,在官网上面下载最新的安装文件http://www.rabbitmq.com/install-debian.html 2.安装完之后 启动rab ...
- mac系统连接android电话
mac该系统不能连接android手机问题解决: 1.将电话 2.到场android手机vendor ID: 终端业务CMD: system_profiler SPUSBDataType 在列出的u ...
- Repeater在无数据记录时显示暂无数据
原文:Repeater在无数据记录时显示暂无数据 方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <Footer ...
- 致网友Wonderfei的一封信(怎样选择自己主动化框架的几点拙见)
注:本来这封信要发给Wonerfei网友的,可是由于每次仅仅能发200字,所以干脆贴到博客上,叫Wonderfei同学到这上面来看,也算是我自己的一个暂时总结吧.同一时候也希望大家给予Wonderfe ...
- ocp认证考试指南第一章
数据库存储结构: 物理数据库存储结构: 必须的三类文件: 控制文件(controlFile):multiplexing the controfile 多路复用控制文件,指向其它关键文件,存储序列号和时 ...
