背景图片满屏显示：

.mainbody{position:absolute; top:0; left:0; height:100%; width:100%; background-image:url(images/bj.jpg); background-position:top center; background-repeat: no-repeat; background-attachment:fixed; background-size: cover; -webkit-background-size: cover;-o-background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bj.jpg',sizingMethod='scale');zoom: 1;}

_background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="图片路径");

white-space:nowrap;同以超链接不换行

word-wrap:break-word ;英文数字换行虚加属性

(ie6 max-height解决方案)

.divcss5{height: expression(this.height> 500 ? 500 : true); max-height: 500px;}

针对低版本chrome谷歌浏览器设置一个校准字体大小样式：

-webkit-text-size-adjust:none*:focus { outline: none; }

input框去掉焦点 border-color: transparent;边框颜色透明

(1)透明度兼容性：

filter:alpha(opacity=90);

-moz-opacity:0.9;(火狐)

-khtml-opacity: 0.9;opacity: 0.9;

(2)字体兼容性(设置成英文或unicode编码可兼容ie9等)：“黑体”对应英文名为“SimHei”“宋体”对应英文名为“SimSun”“仿宋”对应英文名为“FangSong”“微软雅黑”对应英文名为“Microsoft YaHei”

(3)hover兼容解决办法(ie6下不兼容a标签以外的hover属性)：

body { behavior:url("csshover.htc"); }

/* css注释：别忘记csshover.htc，使用时候注意路径 */

img{width:165px; height:60px; background:#090;}

/* 原本图片宽度和高度背景颜色 */

img:hover{width:200px; height:200px; padding:3px; border:2px solid #00F; cursor:pointer}

/* hover鼠标经过赋予让图片变宽 高，设置padding和2px蓝色边框、css cursor为鼠标指针样式 */

li:hover{ border:1px solid #000}

/* li列表标签鼠标经过出现黑色边框 */

.abc:hover{ color:#F00}

/* 对象.abc鼠标经过其内容css字体颜色变红色 */

(4)CSS hack之特殊符号的应用大全：

1.适用浏览器：IE/Mac：

/* CSS注释：在IE Mac上忽略下面的语句 \*/

selector { ...styles... }

/* 忽略结束 */ 反斜线(\)hack利用了IE/Mac的一个bug。以\*/结束的css 注释在IE/Mac上是不正确关闭的，所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。

2.适用浏览器：IE6及其以下版本：width: [W3C Model Width]; _width: [BorderBox Model]; IE 6 及以下的版本可以识别带有下划线前缀的属性，而其它浏览器会忽略它。因此，一个属性前面加上下划线或者连字符，就成为了IE6及以下版本浏览器的专有属性。

3.适用浏览器：IE7以下版本：width: [W3C Model Width]; *width: [BorderBox Model]; 除了下划线和连字符，版本7及以下的IE可以识别以非字母字符为前缀的属性，而其它浏览器会忽略。

4.适用浏览器：IE4-6：* html p {font-size: 5em; } HTML元素是W3C标准DOM的根元素，但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器，但IE4-6却会对它正常处理。这个HACK使用了完全有效的CSS。

5.适用浏览器：IE7： *+html p { font-size: 5em; } 只在IE7标准模型里工作正常，在怪异模式下不能用。同时，也被IE8的兼容模式(相当于IE7的标准模式)所支持。它也使用了有效的CSS。

6.适用浏览器： IE6以上版本及非IE浏览器：html > body p { color: blue; } IE6和早期的版本不支持“子选择器”(>)，我们可以利用这个为其它浏览器指定特别的规则。

7.适用浏览器： IE7以上版本及非IE浏览器 html >/**/ body p { color: blue; } 虽然IE7支持对子选择器，但通过以下hack方法也可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候，IE7会不识别后面的规则，就和较早版本的浏览器一样。

(5)IE6 png图片透明的解决方法教程1、需要DD_belatedPNG.js和DD_belatedPNG_0.0.8a.js文件，下面我们会提供打包下载2、需要在需要支持png图片html页面引入这2个JS文件(2个js文件我们放入到js文件夹里为例)因为是针对IE6的，其它更高版本浏览器不需要使用此特效，所以我们使用注解式if条件让IE6读取JS文件，代码如下：

(6)IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

#divcss5{

background:blue; /*Firefox 背景变蓝*/

background:red \9; /*IE8 背景变红色*/

background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

(7)CSS Hack汇总快查(CSS兼容代码演示)

1、屏蔽IE浏览器(也就是IE下不显示)

*:lang(zh) select {font:12px !important;} /*FF的专用

*/select:empty {font:12px !important;} /*safari可见*/这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

2、仅IE7识别hack *+html {…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。

3、IE6及IE6以下识别CSS HACK * html {…}这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。html/**/ >body select {……}这句与上一句的作用相同。

4、仅IE6不识别div hack select { display /*IE6不识别*/:none;}这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

5、仅IE6识别支持 _yangshi{_height:20px;}这里IE6支持识别CSS属性前“_”短下划线。

6、仅IE6与IE5不识别 select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

7、仅IE5不识别 select/*IE5不识别*/ { display:none;}这一句是在上一句中去掉了属性区的注释。只有IE5不识别

8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。

9、清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。

10、截字省略号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

11、只有Opera识别

@media all and (min-width: 0px){ select {……} }针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

12、IE的if条件Hack

所有的IE可识别

只有IE5.0可以识别

IE5.0包换IE5.5都可以识别

仅IE6可识别

IE6以及IE6以下的IE5.x都可识别

仅IE7可识别

13、仅IE8兼容识别div{height:20px\9;}这里的“\9”仅IE8支持识别

(8)删除点击后链接产生的虚线框

一、使用CSS解决法，CSS代码：

a {blr:expression(this.onFocus=this.blur())}

二、直接在超链接标签内加属性代码如下：

css

(9)不使用hover外部CSS样式实现hover鼠标悬停改变样式

DIVCSS5

(10)CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

.abc{ height:300px; border:1px solid #000; margin:0 auto}

@media screen and (min-width: 1201px) { .abc {width: 1200px} }

/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

@media screen and (max-width: 1200px) { .abc {width: 900px} }

/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

@media screen and (max-width: 901px) { .abc {width: 200px;} }

/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */

@media screen and (max-width: 500px) { .abc {width: 100px;} }

/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

(11)文件命名参考表，DIV CSS命名集合：

CSS样式命名

说明网页公共命名

#wrapper 页面外围控制整体布局宽度

#container或#content 容器,用于最外层

#layout 布局

#head, #header 页头部分

#foot, #footer 页脚部分

#nav 主导航

#subnav 二级导航

#menu 菜单

#submenu 子菜单

#sideBar 侧栏

#sidebar_a, #sidebar_b 左边栏或右边栏

#main 页面主体#tag 标签

#msg #message 提示信息

#tips 小技巧

#vote 投票

#friendlink 友情连接

#title 标题

#summary 摘要

#loginbar 登录条

#searchInput 搜索输入框

#hot 热门热点

#search 搜索

#search_output 搜索输出和搜索结果相似

#searchBar 搜索条

#search_results 搜索结果

#copyright 版权信息

#branding 商标

#logo 网站LOGO标志

#siteinfo 网站信息

#siteinfoLegal 法律声明

#siteinfoCredits 信誉

#joinus 加入我们

#partner 合作伙伴

#service 服务

#regsiter 注册

#arr, #arrow 箭头

#guild 指南

#sitemap 网站地图

#list 列表

#homepage 首页

#subpage 二级页面子页面

#tool, #toolbar 工具条

#drop 下拉

#dorpmenu 下拉菜单

#status 状态

#scroll 滚动

.tab 标签页

.left .right .center 居左、中、右

.news 新闻

.download 下载

.banner 广告条(顶部广告条)电子贸易相关

.products 产品

.products_prices 产品价格

.products_description 产品描述

.products_review 产品评论

.editor_review 编辑评论

.news_release 最新产品

.publisher 生产商

.screenshot 缩略图

.faqs 常见问题

.keyword 关键词

.blog 博客

.forum 论坛

CSS文件命名 说明

master.css,style.css 主要的

module.css 模块

base.css 基本共用

layout.css 布局，版面

themes.css 主题

columns.css 专栏

font.css 文字、字体

forms.css 表单

mend.css 补丁

print.css 打印```