今天是:
首 页信息查询网站SEO查询工具CSS编辑器建站素材
网海拾贝,电脑资讯,电脑快报,it资讯,网站建设资讯,教程基地
软件新闻
操作系统
Vista Winxp Win2003 Linux Windows综合
工具软件
系统工具 媒体工具 网络工具 杀毒软件 聊天
软件开发
C教程 C++ Java C# ASP.NET JSP PHP
数据库
Oracle MySQL DB2 SQL Server Sybase
安全
网络 病毒
办公应用
Word Excel Powerpoint Outlook 其他
平面设计
Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax
网站运营
网站运营 网站优化 网站策划 策划书下载 建站心得 站长故事 网站盈利 网页制作 网页特效 素材下载 免费资源 QQ频道
  当前位置:首 页 >> 网页制作 >> CSS教程 >> CSS兼容问题资料汇集

CSS兼容问题资料汇集

  发布于2008-07-18 08:49 来源:网海拾贝

CSS兼容问题资料汇集

  CSS兼容问题一直困扰着CSSer,面对各浏览器,往往感觉束手无策,愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务。
  
  我进行前端开发的时候,测试用的浏览器大致有: IE7、IE6、Opera9(文章撰写时版本为9.25 8825),Safari3(文章撰写时版本为3.0.4 523.15),Firefox2(文章撰写时版本为2.0.0.11)等。
  
  在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一,更详细的CSS兼容知识,欢迎关注52CSS.com的相关文章。

IE系列

  selector { +property:value; } 在属性名前加上加号"+",这个Hack只有IE系列可以识别.
  selector { *property:value; } 在属性名前加上星号"*",这个Hack只有IE系列可以识别.
  selector { _property:value; } 在属性名前加上下划线"_",这个Hack只有IE系列 (除IE7外) 识别.
  * html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.
  html/**/ >body  selector { property:value; } 在选择器上运用继承法 html/**/ >body  selector ,这个Hack只有IE系列 (除IE7外) 可以识别.
  selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
  selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
  select/**/ { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用.
  *+html  selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 这个Hack只有IE7可以识别.

Firefox:

  *:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.

Safari:

  selector:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.

Opera:

  @media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.

  以上的CSS Hack并不完整,欢迎大家一起补充。
  对于Hack的运用,最普遍的现象是CSS盒模型Hack,清除浮动Hack。

CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:

  selctor { width:IE5.X宽度; voice-family :""}""; voice-family:inherit; width:正确宽度; }

清除浮动Hack,相信这个定义用的人很多:

  selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

CSS兼容问题资料汇集

 


中查找“CSS兼容问题资料汇集”更多相关内容

中查找“CSS兼容问题资料汇集”更多相关内容

上一篇:CSS垂直居中图片
下一篇:纯Css鼠标经过下拉菜单
最近更新 赞助商
·CSS制作圆角导航的另一思路08-21
·CSS制作生日蜡烛代码08-20
·css伪类伪元素08-20
·使用CSS固定背景08-20
·网页CSS背景图片使用的测试结果08-20
·网站进行W3C XHTML1.0验证的经验08-20
·css教程:可读性可维护性良好的CSS文件08-20
·保存CSS中的图片的几种方法08-19
·CSS网页布局:网页页面结构化08-19
·CSS教程:网页颜色的几种表示08-19
·常用的属性代码简化表08-18

共有评论 0 条 网友评分 0分 查看所有评论


发表评论→ 学而不思则罔,思而不学则殆,请大胆发表你的见解。

输验证码:

您对此篇文章的评分:1分 2分 3分 4分 5分

  • 站内搜索
关键词

搜索方式

搜索范围

精确匹配
Baidu
网站首页 - 关于本站 - 网站地图 - 广告合作 - 站点声明 - RSS订阅 - 联系我们
Copyright © 2005 网海拾贝.[新ICP备05003216号]. All Rights Reserved .