IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台!
  • 登录
  • 注册
  • 设为首页
  • 加入收藏
  • 网站首页
  • IT风向标
  • 网站优化
  • Html
  • CSS
  • JavaScript
  • ASP
  • Php/Mysql
  • Flash
  • Ajax
  • 源码下载
  • 精美桌面
  • 供求信息
  • 超稳定100M虚拟主机只要100元,还送50M邮箱!
  • 文字广告招商中...
  • 会员注册 | 用户登录 | 我要投稿
  • 信息订阅
CSS Hack 汇总[千百度资料] 您现在正在浏览:首页 > CSS > 
CSS Hack 汇总[千百度资料]

作者:xddxz 发布时间:2008-01-13 21:37:59 来源:互联网

屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
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,建议遵循正确的标签嵌套(div ul li 嵌套结构关系),这样可以减少你使用Hack的频率,不要进入理解误区,并不是一个页面就需要很多的hack来保持多浏览器兼容),很多情况下也许一个Hack都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

IE5/MAC的过滤器,一般用不着
/**//*/
@import "ie5mac.css";
/**/

下面是IE的条件注释,个人觉得用条件注释调用相应 Hack是比较完美的多浏览器兼容的解决办法。把需要hack的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被Hack的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用hack,很多情况下,当我本人写CSS如果把全部代码包括Hack都写到一个CSS文件的时候的时候会很随意,想怎么Hack就怎么Hack,而你独立出来写的时候,你就会不自觉的考虑是否有必要Hack,是先Hack CSS?还是先把主CSS里面的东西调整到尽可能的不需要Hack?当你仅用很少的Hack就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵

IE的if条件Hack 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

部分Hack 在目前浏览器中的适用情况对照图。

常用 css hack

有新的将继续添加。

  
【评论】【加入收藏夹】【大 中 小】【打印】【关闭】
※ 相关信息
无相关信息

发表评论
查看评论 
用户名: 密码:
验证码: 匿名发表
[注册帐号]
[控制面板]
[用户登陆]
[修改资料]
[用户收藏]
[我的状态]
[退出登陆]
 
文章搜索
     
    [添加文章]   [管理文章]
最新技术文档
    ·十天学会PHP之基础知识
    ·十天学会PHP之流程控制
    ·十天学会PHP之构建数据库
    ·十天学会PHP之连接数据库
    ·echo和print 的区别
    ·PHP生成随机字符串
    ·PHP取得文件后缀
    ·正则表达式经验谈
    ·PHP的Cookie技术介绍
    ·PHP数组排序
技术文档排行榜
    ·天气预报小偷,根据IP自动判断地址
    ·超经典计算机使用问题105答
    ·'AjaxPro'未定义错误的原因&javascript顺
    ·[初学者必读]网页制作之HTML基础知识
    ·DIV&CSS打造自动伸展三栏复合布局
    ·CSS网页布局入门教程:下拉及多级弹出式菜单
    ·阿里妈妈广告的投放技巧
    ·谁是网页浏览器引擎速度真正王者
    ·JavaScript:世界上误解最深的语言
    ·几种常用禁止修改输入框的方法
关于站点 - 广告服务 - 联系我们 - 免责声明 - 程序支持 - 网站地图 - 留言中心 - 返回顶部

Copyright © 2007-2008 www.Jishubu.com online services. All rights reserved. Template designed by laogui.
违法不良信息举报中心 津ICP备07002356号