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

作者:青苹果 发布时间:2007-12-02 11:18:59 来源:懒人图库
  IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服

http://www.tantek.com/CSS/Examples/boxmodelhack.html

  IE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸运的是这个情况在IE6中有了好转
  但是IE6在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model
  所以,tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作
Quote
div.content {
width:400px; //这个是错误的width,所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}
  现在回到主题,我们经常看到!important和(空格)/**/:组合在一起使用,这个写法有什么奥妙呢?

  看刚才那个写法,我这里可以提供另一种写法也能达到这样的效果
Quote
div.content {
width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}
  同样,这个方法仍必须依靠正确的文档类型声明才能够正常工作,原因在前面已经说过。

  文档类型声明就像一个开关,打开向后兼容的未来,而错误使用的话,就是一个Pandora box。

  
【评论】【加入收藏夹】【大 中 小】【打印】【关闭】
※ 相关信息
 ·CSS应用常见问题大总结  (2007-12-01 14:43:20)
 ·CSS经典技巧十则  (2007-12-01 13:11:18)
 ·初学CSS和标准建站的一些CSS常用技巧  (2007-11-28 10:14:50)
 ·10个你未必知道的CSS技巧  (2007-11-16 15:24:42)
 ·通过CSS类型的顺序改变翻滚效果  (2007-11-16 15:12:30)
 ·[css经典]list-style-type的用法  (2007-11-15 17:50:33)
 ·CSS十大密技 [终极经典]  (2007-11-15 17:49:01)
 ·谁是网页浏览器引擎速度真正王者  (2007-11-11 00:40:10)

发表评论
查看评论 
用户名: 密码:
验证码: 匿名发表
[注册帐号]
[控制面板]
[用户登陆]
[修改资料]
[用户收藏]
[我的状态]
[退出登陆]
 
文章搜索
     
    [添加文章]   [管理文章]
最新技术文档
    ·十天学会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号