CSS Hack 汇总速查一览

由于浏览器之间存在兼容性问题,在制作网页的时候,为了使页面能在不同浏览器中显示相对一致或者其他原因,网页制作人员总结了种种 Hack 方法;在解 决兼容性问题之前,这些方法还经常会用到。接下来,大前端将给大家介绍常用的CSS Hack汇总,以便大家平时的速查。

屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px  !important;}  select:empty {font:12px  !important;}  这 里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别
* html  select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE7可以识 别
* html  select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。

IE6及IE6以下识别
* html  select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同 样可以识别这个HACK。其它浏览器不识别。html >body  select {…} 这句与上一句的作用相同。

仅 IE6不识别,屏蔽IE6

select { display :none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号 前。

仅IE6与IE5不识别,屏蔽IE6与IE5

select { display :none;} 这里与上面一 句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

仅IE5不识别,屏蔽IE5
select {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。

盒模型解决方法
selct {width:IE5.x宽度; voice-family :””}””; voice- family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;} 在 Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这 个问题。

截字省略号

select { -o-text-overflow:ellipsis; text- overflow:ellipsis; white-space:nowrap; overflow:hidden; } 这个是在越出长度后会自行的截 掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有 的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器, 只有IE5.x可见
@media tty {i{content:””;}} @import ‘ie5win.css';
IE5/MAC的过滤器,一般用不着

IE的if条件Hack
<!–[if IE]> Only IE <![endif]–> 所有的IE可识 别<!–[if IE 5.0]> Only IE 5.0 <![endif]–>只有IE5.0可以识 别<!–[if gt IE 5.0]> Only IE 5.0  <![endif]–>IE5.0包换IE5.5都可 以识别<!–[if lt IE 6]> Only IE 6- <![endif]–>仅IE6可识 别<!–[if gte IE 6]> Only IE 6/  <![endif]–>IE6以及IE6以下的IE5.x 都可识别<!–[if lte IE 7]> Only IE 7/- <![endif]–> 仅IE7可识别

以上内容可能并不全面,欢迎大家能和我一起把这些技巧都汇总起来,为以后工作的查询提供一个方便,同时在这里感谢那些研究出这些HACK的作者们



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩游戏4g计算机的内存不足,玩游戏时出现存储空间不足, 无法完成此操作, 到底是何原因?...

游戏是Just Cause 2(即《正当防卫2》, 对不&#xff1f;这款游戏需要很高的硬件配置&#xff0c;显卡必须在DirectX10以上才行;你的是什么显卡&#xff1f;请确保安装了最新的.NET和DX10&#xff1b;另我搜索到下面的解决方法&#xff0c;仅供参考&#xff1a;解决方法&#xf…

win10安装opcenum_Win10提示Windows无法安装到GPT分区形式磁盘

Win10系统提示Windows无法安装到GPT分区形式磁盘该怎么办&#xff1f;最近有用户反映说在安装Win10原版系统的时候&#xff0c;采用的是U盘安装Win10的方法&#xff0c;到磁盘选择这一项的时候&#xff0c;选中C盘不能安装&#xff0c;提示&#xff1a;Windows无法安装到这个磁…

JPA 2 | EntityManagers,事务及其周围的一切

介绍 对我来说&#xff0c;最令人困惑和不清楚的事情之一是&#xff0c;作为Java开发人员&#xff0c;一直是围绕事务管理的谜团&#xff0c;尤其是JPA如何处理事务管理。 事务什么时候开始&#xff0c;什么时候结束&#xff0c;实体的持久化方式&#xff0c;持久性上下文等等。…

JavaScript高级特征之面向对象笔记

Javascript面向对象&#xff1a;函数&#xff1a; * Arguments对象&#xff1a; * Arguments对象是数组对象 * Arguments对象的length属性可以获取参数的个数 * 利用Arguments对象模拟函数的重载效果&#xff08;javascript中不存在函…

Object.prototype.hasOwnProperty与Object.getOwnPropertyNames

Object.prototype.hasOwnProperty() 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性&#xff1b;和 in 运算符不同&#xff0c;该方法会忽略掉那些从原型链上继承到的属性。 使用 hasOwnProperty 方法判断属自身…

IE9真的支持CSS3和HTML5?

微软昨天在其2009年专业开发者大会上展示 了下一个版本的Internet Explorer浏览器IE9。 尽管只是一个早期版本&#xff0c;IE开发团队还是比较高调的宣布了IE9的一些改 进&#xff0c;比如速度比之前的IE版本都更快些&#xff0c;缩小与FF和webkit之间的差距(也就是还是赶不上了…

绘图用计算机软件的基本种类有,主编教您电脑绘图软件有哪些

绘图软件是指专业人员根据一定准则设计的用于计算机绘图软件程序&#xff0c;种类非常多&#xff0c;通过它们可以满足足广大用户的基本绘图要求。下面&#xff0c;我就给大家介绍电脑绘图软件有哪些。电脑是根据指令进行高速计算的电子设备&#xff0c;功能强大&#xff0c;时…

python安装math库_Python-math库

导入函数import mathe#表示一个常量>>> math.e2.718281828459045exp#返回math.e,也就是2.71828的x次方exp(x)>>> math.exp(1)2.718281828459045>>> math.exp(2)7.38905609893065>>> math.exp(3)20.085536923187668pi#数字常量&#xff0c;…

使用Encog,ROME,JSoup和Google Guava进行博客分类

继续使用Programming Collection Intelligence &#xff08;PCI&#xff09;&#xff0c;下一个练习是使用距离得分根据相关博客中使用的单词确定博客列表。 我已经找到Encog作为AI /机器学习算法的框架&#xff0c;为此&#xff0c;我需要一个RSS阅读器和一个HTML解析器。 我…

HTML浮动导致高度塌陷,HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)...

元素浮动定义float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像&#xff0c;使文本围绕在图像周围&#xff0c;不过在 CSS 中&#xff0c;任何元素都可以浮动。浮动元素会生成一个块级框&#xff0c;而不论它本身是何种元素。如果浮动非替换元素&#xff0c;则要指定…

Python API简单验证

前言 因为CMDB内部的需求&#xff0c;需要一个API进行数据传输&#xff0c;用来传递需要抓取的服务端信息信息给抓取的autoclient&#xff0c;autoclient抓取好之后再通过API传输到服务器&#xff0c;保存到数据库。但是为了防止恶意的API访问&#xff0c;需要做一个验证。 设想…

完全CSS实现鼠标移上出现层的效果(超简单)

看过许多鼠标事件&#xff0c;都很复杂&#xff0c;太多的文件和繁杂的代码,而且好多都是用js实现&#xff0c;加载速度很慢。 这几天一直在找一种简单的实现效果&#xff0c;完全 CSS编写的效果&#xff0c;现在找到了&#xff0c;非常的少。 这就是完全 CSS实现的层效果&am…

搜索引擎学习日志

了解是什么&#xff1a;Google的咖啡因系统、Megastore云存储系统、Pregel云图计算模型、暗网爬取技术、Web2.0网页作弊、机器学习排序、情景搜索、社会化搜索 学习思想&#xff1a;先全局、再细节 《这就是搜索引擎&#xff1a;核心技术详解》page 33 / 315 开始第二章&#x…

前端微信签名验证工具_微信小程序API 用户数据的签名验证和加解密

用户数据的签名验证和加解密数据签名校验为了确保 开放接口 返回用户数据的安全性&#xff0c;微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验&#xff0c;确保数据的完整性。签名校验算法涉及用户的session_key&#xff0c;通过 wx.login 登录流程获取…

会计电算化的过程 实质上是用计算机,会计电算化的过程,实质上是用计算机()的过程。A.单一地替代手工会计操作B.单一地替代对会计进行分...

会计电算化的过程&#xff0c;实质上是用计算机()的过程。A&#xff0e;单一地替代手工会计操作B&#xff0e;单一地替代对会计进行分更多相关问题以下对冷饮操作要求描述错误的是&#xff1a;()客舱网路的功用。()次高速减脂过程中一般每减多少做一个平台过渡()架线施工时弧垂…

Spring MVC控制器的单元测试:配置

传统上&#xff0c;为Spring MVC控制器编写单元测试既简单又成问题。 尽管编写调用控制器方法的单元测试非常简单&#xff0c;但问题是这些单元测试不够全面。 例如&#xff0c;我们不能仅通过调用已测试的控制器方法来测试控制器映射&#xff0c;验证和异常处理。 Spring MVC…

css实现鼠标覆盖显示大图

html <div <a href”#”> <img src”img01.jpg”> <img src”img02.jpg”> </a> </div> css img{border:none;} .pic{position:relative;top:10px;left:10px} .pic a .large{position:absolute;height:0;width:0;} .pic a:hover{di…

前端js编码

1、首先是encodeURI和encodeURIComponent&#xff1b; 从名字可以清晰的看出他两都是主要用于url编码的&#xff0c;那之间有什么区别呢&#xff1f;唯一区别就是编码的字符范围&#xff0c;其中 encodeURI方法不会对下列字符编码 ASCII字母、数字、~!#$&*():/,;?&#x…

common lisp的几个基本概念

S-表达式 quote nil 与 () cons car cdr 真假 predicate 谓词与 t 与 nil null 函数 与 not 函数 if then else and 与 or defun recursion 递归 谓词 eql 与 equal format 与 read&#xff1a;format 在函数体内调用不会输出 nil&#xff08;format 函数本身有返回值为 nil) l…

python循环结束执行后面代码_计算机程序中某种代码的反复执行,称为________。Python中的循环有重复一定次数的________,也有重复到某种情况结束的________。...

3.(2019高一下浙江期末)数制转换。将一个K进制(k<10)数x转换成十进制数可采用如下方法&#xff1a;主要方法是从右向左&#xff0c;依次取数x的各位数字&#xff0c;分别计算出该数从右边数起的第i位数字与k(i-1)的积&#xff0c;再将其累加&#xff0c;直到所有的数字取完为…