IE8、IE7、IE6、Firefox2.0.0.12的一些CSS HACK测试

superadmin · 发表于 2009-4-16 17:17:43

对IE8、IE7、IE6、Firefox2.0.0.12做了简单的一些CSS HACK测试。下文中的 IE8 暂时仅代表IE8 beta1)。
　　CSS定义：p {color:#f00;}
　　xhtml结构：<p>文字</p>
　　主要是测试“文字”这个颜色在不同浏览器下使用hack的一些结果报告：

　　* html  p {color:#f00;}　　　支持 IE6       不支持FF IE7 IE8b
　　*+html p {color:#f00;}　　　支持 IE7 IE8b       不支持FF IE6
　　p {*color:#f00;}　　　　　　支持 IE7 IE6       不支持FF IE8b

　　相关测试：

　　IE8 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

E[att^=’val’] //子串以’val’ 开始
E[att$=’val’] //子串以’val’ 结束
E[att*=’val’] //子串中包含’val’
　　IE8 支持绝大多数基本的 CSS2.1 选择器，不支持的包括但不限于：[:first-line] 、[:first-letter]。

　　对于 CSS2.1 中的 generated content 部分，即通过使用伪元素 :before 和 :after 添加文本内容，IE8 中支持并未完全。

　　而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ，IE8 中依旧没有支持。

　　对于原来用来区分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。

　　原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
　　原有 IE 的 z-index bug 在 IE8 中依旧存在。
　　IE8 中产生新的 bug：当 line-heigth 小于正常值时，超出的部分将被裁切掉。
　　IE8 中依然不支持 display:table 。
　　IE8 中依然不支持 border 的 transparent 值。
　　IE8 中 @import 只支持三层嵌套。

　　IE8中 border的 transparent 不被支持
　　IE8中产生新的BUG：line-heigth BUG

　　/*/p{ color:#1e90ff}/*/　只针对IE8的hack，可以是属性也可以是类

superadmin · 发表于 2009-4-17 10:41:11

今天看到hiccblogs里面一个关于IE8的兼容，一句话很简单，可惜只是针对IE兼容的，而且是建立在IE7的核心之上，局限性很大。自认为css兼容做的相对比较熟练，既然出了IE8，那就把IE8的兼容也研究一下。

CSS兼容性一直是大家头疼的问题，IE6、IE7和FF已经让大家够呛，在以前的文章中，很多这方面的知识介绍。IE8正式版发布以来,就想在找一种区别IE8正式版的方法.在百度搜索有很多个结果,google搜索的结果更多。IE8正式版和测试版在hack上是有很大区别的.而且网络上的方法几乎都是相互转载,出现频率最高的要数那张linxz.cn的hack图片了，可惜这张图里的方法对IE8正式版无效。　

　经过分析和总结,有了下面的行之有效的解决方案,或许以后还会有更好更简单的hack，但就目前来说这个方法可以解决燃眉之急.
　　
Simple Example:
•"\9"　例:"margin:0px auto\9;".
•这里的"\9"可以区别所有IE和FireFox.
•"*"　IE6、IE7可以识别.IE8、FireFox不能.
•"_"　IE6可以识别"_",IE7、IE8、FireFox不能

.class{
background-color:# FFFF00;/*所有浏览器*/
* background-color:#00FF00;/*IE*/
_ background-color:# 00FFFF;/*IE6*/
}

@media all and(min-width:0){
.class{
background-color:#FF00FF; /*Opera */
} }/*只有Opera识别*/

@media all and (min-width:0){
.class{
background-color:#FF00FF; /*Opera和Sa */
html* .class{
background-color:# 808080; /*Sa*/
}
}}

superadmin · 发表于 2009-4-17 10:41:22

下面的代码,大家可以COPY过去测试一下.发现颜色的变化.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>区别IE6、IE7、IE8、FireFox的CSS hack</title>
<style type="text/css">

</style>
</head>

<body>
<div id="test" class="color">测试方块 zss</div>
<div id="note">
<strong style="color:#009933">IE6 最终为绿色</strong>
<strong style="color:#0066FF">IE7 最终为蓝色</strong>
<strong style="color:#FF0000">IE8 最终为红色</strong>
<strong style="color:#CC00FF">FireFox 最终变为紫色</strong>
<div class="note">
今天看到hiccblogs里面一个关于IE8的兼容，一句话很简单，可惜只是针对IE兼容的，而且是建立在IE7的核心之上，局限性很大。自认为css兼容做的相对比较熟练，既然出了IE8，那就把IE8的兼容也研究一下。
</div>
<div class="note">CSS兼容性一直是大家头疼的问题，IE6、IE7和FF已经让大家够呛，在以前的文章中，很多这方面的知识介绍。IE8正式版发布以来,就想在找一种区别IE8正式版的方法.在百度搜索有很多个结果,google搜索的结果更多。IE8正式版和测试版在hack上是有很大区别的.而且网络上的方法几乎都是相互转载,出现频率最高的要数那张linxz.cn的hack图片了，可惜这张图里的方法对IE8正式版无效。
　　经过分析和总结,有了下面的行之有效的解决方案,或许以后还会有更好更简单的hack，但就目前来说这个方法可以解决燃眉之急.<br />
　　
</div>

<div class="note">
<ul>
<li style="list-style:none;"><strong style="color:#009933">Simple Example:</strong></li>
<li>"\9"　例:"margin:0px auto\9;".</li>
<li>这里的"\9"可以区别所有IE和FireFox.</li>
<li>"*"　IE6、IE7可以识别.IE8、FireFox不能.</li>
<li>"_"　IE6可以识别"_",IE7、IE8、FireFox不能</li></ul>
  </div>

</div>
</body>
</html>

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

IE8、IE7、IE6、Firefox2.0.0.12的一些CSS HACK测试

本帖子中包含更多资源

相关帖子