现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对! important可以正确解释,会导致页面没按要求显示!搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏 览一下,应该没有问题了。
现在写一个CSS可以这样:
#example { color: #333} /* Moz */
* html #example { color: #666} /* IE6 */
*+html #example { color: #999} /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们都互不干扰。我真希望那个IE6快点退休......
css Hacks,css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:www.webdevout.net,这个CSS补丁(hacks)很简单,在样式表中单独为ie7设置某个元素,id或者class前面这样写:
*:first-child+html #ID{}
或者
*:first-child+html .class{}
别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.
IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:
>body
html*
*+html
这 三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 >body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *>body,而且不光对于 >选择符,+,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 *+html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。
最后作者给出了最佳方式:
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
The IE7 CSS Hack(!important在ie7.0的hack方法)
由 于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以 问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.
新建一个css样式如下:
插入代码:
#item {
width: 200px
height: 200px
background: red
}
新建一个div,并使用前面定义的css的样式:
插入代码:
some text here
在body表现这里加入lang属性,中文为zh:
插入代码:
现在对div元素再定义一个样式:
插入代码:
[/code]
*:lang(en) #item{
background:green !important
}
[/code]
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:
插入代码:
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试:
ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win &linux
netscape 7.01, 8/win
mozilla 1.7.12/win &linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux
Screenshot of the IE7 css hack in IE7
Screenshot of the IE7 css hack in Firefox 1.5
按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.
文章来自:http://www.aixq.com/read.php?704
firefox,ie7,ie6兼容性问题,和css解决方案
注:IE都能识别*标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!importantFF不能识别*,但能识别!important
写两句代码来控制一个属性,区别Firefox与IE6:
background:orange*background:blue
//这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*标准浏览器(如Firefox,Opera,Netscape)不能识别*;
写两句代码来控制一个属性,区别IE7与IE6:
background:green !importantbackground:blue
//这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别! important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。
写两句代码来控制一个属性,区别Firefox与IE:
background:orange*background:green
//这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*
写三句代码来控制一个属性,区别Firefox,IE7,IE6:
background:orange*background:green !important*background:blue
//这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直 接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识 别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。
<style>body{color:00ff00}</style>
<!--[if IE 6]>
<style>body{color:#ff6600}</style>
<![endif]-->
<!--[if IE 7]>
<style>body{color:#ff0000}</style>
<![endif]-->
百度源代码解决IE的兼容问题
<!Doctype html>
<htmlxmlns=http://www.w3.org/1999/xhtmlxmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
<metahttp-equiv=Content-Typecontent=“text/htmlcharset=utf-8″>
<metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7>
<title>百度一下,你就知道</title>
<script>varwpo={start:newDate*1,pid:109,page:‘superpage’}</script>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
在网网站服务器上指定预设兼容性模式来解决这个办法
当然如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。
一、如何调试 IE 浏览器?
1.IE7以上版本可以按F12直接打开开发者调试工具进行调试。
2.安装虚拟机。
3.利用设置元素border: 1px solid redoutline: 1px solid red;进行调试。
二、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
1.CSS hack由于不同厂商的浏览器,比如IE、Firefox、Chrome等,或者同一厂商不同版本,比如IE6和IE7对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。
当然,我们也可以反过来利用CSS hack为不同的版本浏览器定制编写不同的CSS效果。
2.CSS hack大致有三种表现形式,分别是CSS属性前缀法、选择器前缀法、IE条件注释法(即HTML头部引用if IE)。
在实际的项目中CSS hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
CSS属性前缀法(即类内部Hack):例如IE6能识别下划线"_"和星号"*";IE7能识别星号"*",但是不能识别下划线"_"。
选择器前缀法(即选择器Hack):例如IE6能识别选择器*html.css{},IE7能识别+html.css{}或者*:first-child+html.css{}。
IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不在支持条件注释);针对IE6及一下版本,这类hack不仅对CSS生效,对写在判断语句里的所有代码都会生效。
_ :ie6* :ie6、ie7
*+ :ie7
+ :ie6、ie7
\9 :ie6、ie7、ie8、ie9、ie10
\0 :ie8、ie9、ie10
\9\0:ie9、ie10
!important :除ie6外
-moz- :Firefox
-webkit-:Safari
-o- :Opera
-ms-:Ie