CSS跨浏览器支持技术概述.ppt

Page ? * 课程目录 1.为特定浏览器提供不同的样式 2.解决空白边叠加的问题 3.避免浮动元素闭合 4.CSS BUG 5.常见问题及解决 1.为特定浏览器提供不同的样式 前言，对于开发人员来说最大的问题是绝大多数用户仍然在使用IE6，而它是一个对CSS规范支持较差，问题较多的浏览器。 1.1条件注释 前言，是一种安全的区分IE浏览器版本的语法，且被认为是取代对IE CSS hack 的首选方法。 1.条件注释:就是一些if判断，但这些判断不是在脚本里面执行的，而是直接在HTML代码里执行。 例如: !--[if IE] 这里只在IE浏览器中显示 ![endif]-- 说明:条件注释的基本结构和HTML的注释(!)是一样的。因此IE以外的浏览器将会把他们看做是普通的注释而完全忽略它们。 IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。 条件注释使用的是HTML的注释结构，因此它们只能用在HTML文件里，而不CSS文件中使用。 1.1条件注释 例1. 判断是否是IE !-- [if IE] ! [endif]-- 例2.判断是否是IE6 !--[if IE 6] ! [endif]-- 例.3 判断是否是IE7 !—[if IE 7] ! [endif]-- 例4.判断条件lte 小于等于、lt小于、gte大于等于、gt大于、! !—[if gte IE 6] 大于等于IE6版本 1.1条件注释 !—[if !IE] 除了IE浏览器（测试不生效） 解决方法: !--[if !IE]!-- 内容 !--![endif]-- 1.1条件注释-实用 说明:由于IE各个版本的浏览器对制作的Web标准页面解释不一样，具体就是对CSS解释不同，因此为了使不同版本的浏览器都能够兼容，可运用条件注释来个字定义，达到兼容的目的。 例.!– 默认先调用css.css样式表-- link rel=“stylesheet” type=“text/css” href=“css.css” / !—[if IE 7] link rel=“stylesheet” type=“text/css” href=“IE7.css” / ! [endif]-- !—[if IE 6] link rel=“stylesheet” type=“text/css” href=“IE6.css” / ! [endif]-- 1.1条件注释-测试使用 例.在IE浏览器下执行显示为红色，而在非IE浏览器显示为黑色。 style body{ background-color:#000; } /style !--[if IE] style body{ background-color:#f00; } /style ! [endif]-- 2. css hack 前言, CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7, 6,Internet Explorer 8,Mozilla Firefox等，对CSS的解析不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 2.1 css hack详解 注:所有的hack都是针对IE浏览器 \9　例:border:1px \9;.这里的\9可以区别所有IE和FireFox. \0　IE8识别，IE6、IE7不能. *　IE6、IE7可以识别.IE8、FireFox不能. _　IE6可以识别_,IE7、IE8、FireFox不能. 2.2 css hack 举例1 IE6 hack _background-color:#CDCDCD; /* ie 6*/ IE6 IE7 hack *background-color