CSS Hack 汇总速查手册浏览器兼容必会

屏蔽IE浏览器(也就是IE下不显示)


代码如下:

*:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别


代码如下:

*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。

IE6及IE6以下识别


代码如下:

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

仅IE6不识别


代码如下:

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

仅IE6与IE5不识别


代码如下:

select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别


代码如下:

select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法


代码如下:

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的过滤器,一般用不着


代码如下:

/*\*//*/
@import "ie5mac.css";
/**/

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的作者们。

(0)

相关推荐

  • CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  • 常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理 如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;-----------ie6 *nowamagic:1px;-----------ie7 nowamagic:1px\0;----------ie89 nowamagic:1px\9\0;----

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

  • CSS Hack 汇总速查手册浏览器兼容必会

    屏蔽IE浏览器(也就是IE下不显示) 复制代码 代码如下: *:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 复制代码 代码如下: *+html {-} 当面临需要只针对IE7

  • CSS Hack 汇总快查

    *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可

  • Web开发人员常用速查手册 英文集合推荐

    为了方便各位朋友,本文收集了一些对Web开发人员非常有用的手册,记得推荐一下哦. HTML 速查手册 HTML/XTML in one page HTML5: The Evolution of Web Standards by James Sugrue (X)HTML Elements and Attributes Doctype Declarations (DTDs) XHTML Character Entity Reference GoSquared HTML Help Sheet CSS

  • HTML,CSS,JavaScript速查表推荐

    事实上, 速查表 就是来帮助我们把日常中最常用到的信息聚集起来,方便使用,使我们做工作时更有效率.有了它们,免去了你的大脑花额外时间去记忆它们的烦恼--你只需要打开简表,马上能查到你想要的信息. 这篇文章里,你可以看到 最实用的HTML,CSS,JavaScript速查表 ,它们可以当作参考资料,备忘录,能帮助你以最快的速度找到想要的信息. 看看这些简表是不是你想要的,请在文章下面留下你的建议,谢谢! HTML HTML帮助手册 HTML速查手册 HTML特殊字符速查表 Dreamweaver

  • Nginx速查手册及常见问题

    Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡. 常用命令 使用自定义配置文件启动 nginx -c /opt/nginx/config/nginx.conf 柔和重启 nginx -s reload 优雅停止服务 nginx -s quit 强制停止服务 nginx -s stop 配置文件检查 nginx -t 常用配置 反向代理 server { listen 80; server_name loc

  • 在网上找的创建《CMD命令速查手册》的批处理

    在线演示:CMD 命令速查手册 复制代码 代码如下: @echo off & setlocal EnableDelayedExpansion echo.======================================== echo 开始创建<CMD命令速查手册>,请稍候-- echo 创建网页文件头-- >CMDHelp.htm echo ^<head^> >>CMDHelp.htm echo ^<title^>CMD命令速查手册^

  • 图片格式的JavaScript和CSS速查手册

    JavaScript对象.方法.函数.属性速查:CSS属性速查:

  • DOM相关内容速查手册

    object 返回包含的对象.   offscreenBuffering 设置或获取对象在对用户可见之前是否要先在屏幕外绘制.   offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度.   offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置.   offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用.   offsetTop 获取对象相对

  • 电脑"蓝屏"原因之速查手册

    死机是令操作者颇为烦恼的事情.死机时的表现多为"蓝屏",无法启动系统,画面"定格"无反应,鼠标.键盘无法输入,软件运行非正常中断等.尽管造成死机的原因很多,但是万变不离其宗,其原因永远也脱离不了硬件与软件两方面.  一.由硬件原因引起的死机  [散热不良]    显示器.电源和CPU在工作中发热量非常大,因此保持良好的通风状况非常重要,如果显示器过热将会导致色彩.图象失真甚至缩短显示器寿命.工作时间太长 也会导致电源或显示器散热不畅而造成电脑死机.CPU的散热是关系

  • Objective-C和Swift的转换速查手册(推荐)

    前言 如果你正要从Objective-C过渡到Swift,或反过来,一个在两种语言间显示等效代码的小手册会很有帮助.本文内容就是这些:苹果开发者的红宝书,包含变量,集合,函数,类等等. 下面例子中,上面是Objective-C代码,下面是等效的Swift代码.必要的地方我会给一些备注来帮助你理解. 变量与常量 创建一个变量 //Objective-C NSInteger score = 556; // NSString *name = @"Taylor"; // BOOL logged

随机推荐