关键词:
测试环境:Windows7
主要测试:IE6、IE7、IE8、Fire Fox3.5.6
次要测试:Chrome4.0、Opera10.10、Safari4.04、360浏览器3.1
为了能够让多个Hack在同一个例子里,现对实例页面做如下要求是:
1、左右有两个DIV分别是#menu,#content,字体颜色为白色。
2、#menu高度500px,#content高度600px。
3、#menu宽度200px,#content宽度是自适应(因为是自适应所以常用的加float的方法不能解决3pxBug)。
4、在#content中写入一段文字且与红色区域边距为50px。
<!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=utf-8" />
<title></title>
<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
#menu{width:200px; height:500px; background:#900; float:left;}
#content{height:600px; padding-left:50px; background:#36f;}
</style>
</head>
<body>
<div id="menu"></div>
<div id="content"></div>
</body>
</html>
- 代码在各种浏览器下进行测试的结果如下:
- IE6
IE8、firefox、Opera、Chrome
通过浏览器的测试我们可以比较出:
1、IE6与IE7效果对比基本一致,但IE6在两个DIV中间出现了3像素的Bug,这也是非常有名的IE6 3像素Bug。注意:如果对IE6的这两个经典的Bug不熟悉的话请看这两篇文章:《3像素Bug》
2、IE8和Fire Fox内,红色区域(#menu)盖住了蓝色的区域(#content)。
提出问题:
1、解决自适应宽度情况下的IE6 3像素Bug(注:如果宽度是一定的,只需要加上浮动float即可解决,但是在宽度自适应的情况下此方法无效)
2、解决位置不一致(例如#content中的文字)
解决方法(利用CSSHack来解决):* html
IE6及更低版本的IE并不是将Html标签认定为是最外层的元素,而是认为*(其中*并不是指通用选择器)才是最外层的元素,而HTML被认为是它的子元素。另外只要第一个元素浮动第二个元素不浮动的话,就会出现3像素bug。
因此既然只有IE6及更低版本“理解”* HTML,那么它就可以作为一种hack来解决浏览器之间的不兼容。
修改代码如下:
<!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=utf-8" />
<title>CSS Hack-CSS</title>
<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#content{height:600px; padding-left:50px; background:#36f;}
</style>
</head>
<body>
<div id="menu"></div>
<div id="content"></div>
</body>
</html>
- 通过上面各种浏览器的截图比较可以发现到目前为止只有IE7及更低版本(以及360浏览器)显示的此页面才是我们想要的效果,然而非IE浏览器的#content的padding-left:50px无效果。如果你够细心可能发现也只有IE7及更低版本(以及360浏览器)的蓝色区域没有被红色区域所覆盖,因此设置padding-left:50px;都被红色区域覆盖了,文字被红色区域撑开,也可以说非IE浏览器中默认将蓝色区域的文字设置为padding-left:200px;了(因为红色区域的宽度是200px)。如果我们在非IE浏览器中也要设置内边距为50px,那么就得是250px才能达到我们想要的效果。但是如果只是单纯的设置padding-left:250px;的话,IE7及更低版本(以及360浏览器)就真正的变成了250px了。
有些朋友肯定会想到使用_Hack来解决此问题,如果这么做的话IE7又不兼容了。因此此方法不可行。
<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#conten{height:600px; padding-left:250px; _padding-left:50px; background:#36f;}
</style>主要用于区分IE与非IE浏览器。(IE均“理解”\9)
虽然\9Hack可以解决(上面例子)IE7中的#content文字位置的问题,但是到目前为止所有的IE均可“理解”此Hack。因此IE8设置成250px以后又被设置成了50px,因此此Hack不能彻底解决问题。代码如下:
<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#conten{height:600px; padding-left:250px; padding-left:50px\9; background:#36f;}
</style>
意思是说所有的IE均设置左内边距为50px;
那么朋友们肯定想到了,再设置一个只有IE8才认识的Hack,很遗憾的告诉你如果从正常的思路来理解的话针对IE8的CSSHack没有。但是我们可以反过来想一想使用排除法将IE8排除。
IE8 Hack
<style>
body,div{margin:0; padding:0;}
div{color:#fff;}
* html #menu{margin-right:-3px;}
#menu{width:200px; height:500px; background:#900; float:left;}
#conten{height:600px; padding-left:250px; *padding-left:50px; background:#36f;}
</style>
红色部分便合起来可以算是IE8的Hack,因为*只有IE7及更低版本才能解析此Hack,因此IE8便会跳过 *padding-left:50px; 不解析此代码,从而将IE8以下的版本排除。
如果IE6、IE7、IE8的效果均不一致,那么如何解决呢?
举例:
假如IE6、IE7、IE8的DIV元素的左外边距均不一致。可以作如下设置便可以解决此类问题:
div
{
padding-left:250px; //解析到此处==>所有的IE均设置为250px
*padding-left:50px; //解析到此处==>IE6和IE7设置为50px
_padding-left:30px; //解析到此处==>IE6设置为30px
}
注:顺序一定不能错。
csshack
CSShack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。CSShack的目的就是使你的CSS代码兼容不同的浏览器。 csshack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差的处理.简单的说cs... 查看详情
csshack
前面的话 CSSHack是实现浏览器样式兼容的兜底办法,能不用就尽量不要使用。但是,针对一些浏览器的bug,比如老版本IE的bug,有时使用CSSHack是不得已而为之的做法。本文将详细介绍CSSHack。CSSHack主要分为属性标记法和选择器... 查看详情
csshack
前面的话 CSSHack是实现浏览器样式兼容的兜底办法,能不用就尽量不要使用。但是,针对一些浏览器的bug,比如老版本IE的bug,有时使用CSSHack是不得已而为之的做法。本文将详细介绍CSSHack。CSSHack主要分为属性标记法和选择器... 查看详情
csshack
1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300... 查看详情
csshack大全
1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{wid... 查看详情
csshack
1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300... 查看详情
csshack
CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},... 查看详情
什么是csshack?
1、什么是CSShack?CSShack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300... 查看详情
针对ie6的一些csshack编写时的注意点小结
区分出IE6的hack写法1.区别IE6、7与FF/IE8:JavaScriptCode复制内容到剪贴板background:blue;*background:orange; 引用显示效果:IE6/7:orangeFF/IE8:blue原理:FF/IE8不支持*开头,而IE6/7都支持。2.区别IE6与IE7/IE8/FF:CSSCode复 查看详情
csshack
!important作用:用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码:#content{ height:960px !important; height:900px;}   查看详情
css中一些常见的兼容性问题
...兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗。CSShack中的一些事:我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做CSS... 查看详情
csshack
CSSHack:不同厂家的浏览器或者相同厂家不同版本的浏览器对于css的解析是不完全相同的,这样就导致了浏览器的页面生成的效果会不一样。CSSHack的作用就是使得css在不同的浏览器中兼容,让不同的浏览器生成我们想要的效果的... 查看详情
csshack
CSShack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。 CSShack分类CSSHack大致有3种表现形式,CSS... 查看详情
常用的csshack
一、什么是CSSHack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程,就叫CSSHack。CSSHack常见的... 查看详情
csshack
什么是CSShack由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSScode就称为CSShack。常用的CSShack有三种方式,CSS内部hack、选择器hack、HTML头部引用,其中第... 查看详情
csshack
之前一直很狭隘的对CSShack持有偏见,觉得写得规范的代码不应该使用这些“邪门歪道”,可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSShack轻松解决了,不得不服啊,对付神奇的IE就得使用... 查看详情
csshack
之前一直很狭隘的对CSShack持有偏见,觉得写得规范的代码不应该使用这些“邪门歪道”,可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSShack轻松解决了,不得不服啊,对付神奇的IE就得使用这些... 查看详情
csshack技术
首先我们要了解一个概念CSShack不同浏览器,比如IE6、IE7、IE8,MozillaFirefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样。这个时候我们就需要针对不同的浏览器去定义不同的CSS,让它能够同时兼... 查看详情