Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 711|回复: 0

CSS Hack 经验分享

[复制链接]

该用户从未签到

发表于 2011-10-18 16:43:46 | 显示全部楼层 |阅读模式
由于 Firefox 的崛起和 IE 兄弟们的各自为政, CSS Hack 再次得到网页制作人员的重视. 兼容浏览器对初学者来说绝对是一个苦活, 我的一些朋友就是因为烦这个没能坚持下来, 很是可惜.
目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担.  玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.

开发平台的选择我很幸运, 我接触网页前台的时候 Firefox2 已经十分红火, 我的所有工作都是在 Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以我推荐以 Firefox 结合 Firebug 扩展作为平台.
Hack 的顺序使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的方法说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.
1234567
#bgcolor { background:red !important; /* Firefox 等其他浏览器 */ background:blue; /* IE6 */}*+HTML #bgcolor { background:green !important; /* IE7 */}
IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (javaScript 除外).
2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.
123456
<!-- 放置所有浏览器的样式 --><link rel="stylesheet" href="style.css" type="text/css" /><!-- 只放置 IE 必须的, 而不能通过 W3C 的代码 --><!--[if IE]> <link rel="stylesheet" href="style_ie.css" type="text/css" /><![endif]-->
浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法, 但以上就是我用过的全部.
网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就永远不会过时 (IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.
回复

使用道具 举报

该用户从未签到

发表于 2011-10-25 08:35:55 | 显示全部楼层
不错啊啊。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

GMT+8, 2024-5-14 11:23 , Processed in 0.352837 second(s), 33 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表