3 CSS Hack文档格式.docx
《3 CSS Hack文档格式.docx》由会员分享，可在线阅读，更多相关《3 CSS Hack文档格式.docx（26页珍藏版）》请在冰点文库上搜索。
因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」（米字号），另外IE6可辨识「_」（底线），因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器（像是Firefox、Opera、GoogleChrome、Safari等）。
3.区别IE6、IE7、Firefox（EXP1）
「*」、「_」
/*Firefox背景变蓝色*/
IE7和IE6可读「*」（米字号），IE6又可以读「_」（底线），但是IE7却无法读取「_」，至于Firefox（非IE浏览器）则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox
4.区别IE6、IE7、Firefox（EXP2）
「*」、「!
important」
green!
important;
/*IE7背景变绿色*/
IE7可以辨识「*」和「!
important」，但是IE6只可以辨识「*」，却无法辨识「!
important」，至于Firefox可以读取「!
important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox
因为Firefox可以辨识「!
important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!
important」，因此可以两个辨识符号来区隔IE7和Firefox。
6.区别IE6、IE7（EXP1）
#tip{
IE7和IE6都可以辨识「*」（米字号），但IE6可以辨识「_」（底线），IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7.区别IE6、IE7（EXP2）
「!
black!
因为IE7可读取「!
」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!
important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。
8.区别IE6、Firefox
「_」
/*Firefox背景变黑色*/
因为IE6可以辨识「_」（底线），但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSShack。
以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。
Windows系统下各浏览器常用CSShack汇总表图
Windows系统下各浏览器常用CSSHACK汇总表图
1.此汇总表中测试浏览器的版本为：
微软系统自带：
IE6、IE7、IE8
火狐：
Firefox3.6.6
Safari：
Safari5.0
谷歌浏览器：
Chrome6.0.458.1dev
Opera浏览器：
Opera10.60
2.其中，多数CSShack是在selector{property:
value;
}基础上更改的。
selector代表CSS选择器，property代表CSS特性，value代表特性的值。
3.FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera
4.Q代表QuirksMode，S代表StandardsMode。
5.HackType列的数字，指的是上面CSShack的实现方式中的列表号。
1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。
CSSHACK兼容一览表图（IE6-IE8、谷歌浏览器、火狐浏览器等主流浏览器兼容一览表图）
一定遵守CSShack的三条原则。
CSShack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。
切莫一有兼容性问题就使用，时刻记得改掉用CSShack修补的问题。
如有不懂可到CSS论坛进行发帖提问大家讨论学习。
CSSHack汇总快查（CSS兼容代码演示）
以下是常用CSSHACK问题及解决代码-DIV+CSS网支持
1、屏蔽IE浏览器（也就是IE下不显示）
*:
lang（zh）select{font:
12px!
}/*FF的专用*/
select:
empty{font:
}/*safari可见*/
这里select是选择符，根据情况更换。
第二句是MAC上safari浏览器独有的。
2、仅IE7识别hack
*+html{…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别CSSHACK
*html{…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。
其它浏览器不识别。
html/**/>
bodyselect{……}
这句与上一句的作用相同。
4、仅IE6不识别divhack
select{display/*IE6不识别*/:
none;
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。
5、仅IE6识别支持
.yangshi{_height:
20px;
这里IE6支持识别CSS属性前“_”短下划线。
6、仅IE6与IE5不识别
select/**/{display/*IE6,IE5不识别*/:
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
7、仅IE5不识别
select/*IE5不识别*/{display:
这一句是在上一句中去掉了属性区的注释。
只有IE5不识别
8、盒模型解决方法
selct{width:
IE5.x宽度;
voice-family:
"
\"
}\"
;
voice-family:
inherit;
width:
正确宽度;
盒模型的清除方法不是通过!
important来处理的。
这点要明确。
9、清除浮动
after{content:
."
display:
block;
height:
0;
clear:
both;
visibility:
hidden;
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
10、截字省略号
select{-o-text-overflow:
ellipsis;
text-overflow:
white-space:
nowrap;
overflow:
}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。
只是目前Firefox并不支持。
11、只有Opera识别
@mediaalland（min-width:
0px）{select{……}}
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。
这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
12、IE的if条件Hack
<
!
--[ifIE]>
OnlyIE<
[endif]-->
所有的IE可识别
--[ifIE5.0]>
OnlyIE5.0<
只有IE5.0可以识别
--[ifgtIE5.0]>
OnlyIE5.0+<
IE5.0包换IE5.5都可以识别
--[ifltIE6]>
OnlyIE6-<
仅IE6可识别
--[ifgteIE6]>
OnlyIE6/+<
IE6以及IE6以下的IE5.x都可识别
--[iflteIE7]>
OnlyIE7/-<
仅IE7可识别
13、仅IE8兼容识别
div{height:
20px\9;
这里的“\9”仅IE8支持识别
以上DIV+CSS教程整理部分HACK解决代码并演示，希望对您有帮助,更多CSSHACK进入
CSShack各浏览器各系统平台兼容一览表图
CSShack是指我们为了兼容各浏览器，而去使用的特别的DIV+CSS定义技巧实现兼容。
这是国外摘来的一张CSShack列表（带WIN的IE6-IE7），显示了各浏览器对csshack的支持程度，对我们制作CSS网页时候考虑兼容网页非常有帮助。
HACKCSS兼容操作系统和各大浏览器兼容一览表图
解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背景不透明方法
DIVCSS5为大家介绍完美解决PNG图片在IE6中背景不透明的方法_解决IE6中PNG图片背景不透明方法-图例
未解决PNG背景透明前截图
解决后PNG图片背景在IE6透明截图
目录
1.解决代码
2.解决png图片在html中
3.解决png作为网页背景-css
1、解决PNG图片在IE6中背景不透明的CSS与JS代码
-
TOP
JS代码
functioncorrectPNG（）//correctlyhandlePNGtransparencyinWinIE5.5&
6.
{
vararVersion=navigator.appVersion.split（"
MSIE"
varversion=parseFloat（arVersion[1]）
if（（version>
=5.5）&
&
（document.body.filters））
for（varj=0;
j<
document.images.length;
j++）
varimg=document.images[j]
varimgName=img.src.toUpperCase（）
if（imgName.substring（imgName.length-3,imgName.length）=="
PNG"
varimgID=（img.id）?
"
id='
+img.id+"
'
:
varimgClass=（img.className）?
class='
+img.className+"
varimgTitle=（img.title）?
title='
+img.title+"
+img.alt+"
varimgStyle="
display:
inline-block;
+img.style.cssText
if（img.align=="
left"
）imgStyle="
float:
left;
+imgStyle
right"
right;
if（img.parentElement.href）imgStyle="
cursor:
hand;
varstrNewHTML="
span"
+imgID+imgClass+imgTitle
+"
style=\"
+"
width:
+img.width+"
px;
+img.height+"
+imgStyle+"
filter:
progid:
DXImageTransform.Microsoft.AlphaImageLoader"
（src=\'
+img.src+"
\'
sizingMethod='
scale'
）;
>
/span>
img.outerHTML=strNewHTML
j=j-1
window.attachEvent（"
onload"
correctPNG）;
CSS代码：
#id{background:
url（图片路径）;
_filter:
progid:
DXImageTransform.Microsoft.AlphaImageLoader（enabled='
true'
src="
图片路径"
2、解决png图片在html中IMG标签使用PNG图片IE6中背景不透明方法
1、新建一个JS文件为iepngfx.js,进以上JS代码拷贝到JS文件里
2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中
只允许IE6读取此JS文件方法：
--[ifIE6]>
scriptsrc="
images/iepngfx.js"
language="
javascript"
type="
text/javascript"
/script>
3、在html中使用图片标签IMG运用PNG图片，在IE6试试看PNG图片背景是否透明了。
3、在CSS中png作为网页背景时在IE6中背景透明方法
同样方法
1、新建JS文件同上，命名为iepngfx.js,进以上JS代码拷贝到JS文件里
3、在CSS中运用PNG图片作为背景的地方加入以下CSS代码：
这样即可解决PNG图片在HTML中img作为图片图标背景不能透明或PNG图片作为网页背景background运用的一样实现PNG图片背景透明。
以下JS和CSS方法解决PNG图片在IE6中背景不透明方法对你有用。
CSS针对谷歌浏览器（Chrome）safari的webkit核心浏览器CSShack
css谷歌浏览器css
Chrome
csssafari浏览器识别CSShack
我们知道和会运用CSSIE火狐浏览器之间的区别DIV+CSSHACK，这里为大家再介绍下区别谷歌浏览器（Chrome）苹果浏览器（safari）与IE之间的hack;
只有webkit核心浏览器的谷歌浏览器、safari浏览器识别的CSShack
Chrome和safari的CSShack代码，只有谷歌浏览器苹果浏览器读取CSS代码：
@mediascreenand（-webkit-min-device-pixel-ratio:
0）{
/*Webkit内核兼容CSS*/
范例：
.yangshi1{color:
#f00}
.yangshi2{border:
1pxsolid#f00;
.yangshi3{background:
#f00;
HTML代码：
divclass="
yangshi1"
css样式1<
/div>
br/>
yangshi2"
divcss5样式2<
yangshi3"
div+css样式3<
总DIVCSS代码：
DOCTYPEhtml>
html>
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
谷歌浏览器和safari
webkit独有区别其它浏览器csshack演示<
/title>
styletype="
text/css"
/**/
/style>
/head>
body>
ahref="
css<
/a>
样式1<
divcss5<
样式2<
div+css<
样式3<
/body>
/html>
可自己动动手复制以上完整演示代码，自己实例实例增加记忆和使用技巧知识
演示效果图：
csshack演示图
说明：
左边下方为IE浏览器显示效果，右边上方为谷歌浏览器显示效果，很明显Chrome支持独有生效的此CSShack代码。
CSS网页错位之DIVCSS宽度计算
DIVCSS宽度计算之CSS网页布局错位
为什么计算宽度
计算网页像素宽度是为了CSS网页布局整齐与兼容。
常见的我们布局左右结构网页或使用padding、margin布局的时候将计算整页宽度，如果不计算无论是宽度过大过小就会出现错位问题。
怎么计算CSS宽度
例一：
我们计算一个左右结构的布局样式。
假如总宽度为400px，那么左右加起来就应当小于400px，那我们可能左边为300px，右边为100px
正确代码：
左右结构宽度计算<
.yangshi{width:
400px;
.zuo{float:
300px;
background:
#CCC;
.you{float:
100px;
#999}
升级会员 