css 兼容性知识总结

大部分知识点来着http://www.divcss5.com/wenji/w538.shtml

1、IE6单独识别

{margin-left:5px;_margin-left:2px}
这个时候除IE6外其它浏览器设别margin-left:5px，IE6单独识别 _margin-left:2px

2、IE7与IE6都识别
{margin-left:5px;*margin-left:2px;}

这个时候除IE6和IE7外，其它浏览器设别margin-left:5px，IE6和IE7识别*margin-left:2px

margin:auto = margin:auto auto auto auto;
margin:0 auto = margin:0 auto 0 auto;

margin:n m p q表示该元素上外边距为n，右外边距为m，下外边距为p，左外边距为q，即 margin:上 右 下 左 ，逆时针一圈。

详情了解margin教程。

margin后面是有4个参数的。
例如：margin:1px 2px 3px 4px
分别表示 上（1px）、右(2px)、下(3px)、左(4px)。

如果只写2个参数的话，比如：margin：1px 2px
那么着是代表 上下都为1px 左右都为2px.

至于居中，很明显， margin:0 auto 是标准的写法！常常我们使用margin:0 auto让 div盒子布局居中

解决图片超出宽度或撑破div css布局方法
1、在文章中发布图片的时候将图片编辑缩小
2、通过对对应div的css来设置显示的图片最宽宽度 推荐
3、通过css对图片设定宽度。

通过css来解决图片撑破div布局案例
通过css来控制代码如下(cmcss是对应父级类名)：
.cmcss {margin: auto;width: 600px;}
.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}这种图片第一次加载时候图片不能显示

直接通过对对应的div内的内容图片宽度设置代码如下：
.cmcss img{ width:500px;} 宽度自定，但是不推荐此方法，因为设置后此div布局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。

可以通过对图片设置最宽css可以使用max-width来设置，但是IE6不支持，但是可以使用浏览器的css hack来设置代码如下
.cmcss img{max-width:500px;_width:500px;}
说明：通过其他浏览器不支持带“_”的css，但是IE6支持。刚好可以通过此css hack来实现对图片宽度的现在。这里只能克服IE6显示固定的宽度来符合其它版本的兼容性。

扩展与提高
我们看 区别不同浏览器CSS HACK的代码
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
你可能要问了，为什么不用“*”来代替“_”来区别IE6浏览器，这里值得注意的是ie6和IE7都会解释和识别“*”的，但是IE7对important的识别具有优先全，所以IE7在CSS代码中有important将有优先识别并成为唯一性，所以在有important时候IE7和IE6前面都可以用“*”号，但是无论带important在前或在后IE7将识别为唯一区别css hack。所以这里没有important的时候需要用另外IE6的css hack中“_”小写半角下划线。

1、cursor语法：
cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

常用cursor光标说明

1）、div{ cursor:default }默认正常鼠标指针
2）、div{ cursor:hand }和div{ cursor:text } 文本选择效果
3）、div{ cursor:move } 移动选择效果
4）、div{ cursor:pointer } 手指形状 链接选择效果
5）、div{ cursor:url(url图片地址) }设置对象为图片

2、cursor样式效果图

css cursor鼠标光标指针样式图

3、鼠标指针说明
cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

4、布局结构
p { cursor: text; } /* css注释： 设置鼠标移动到html p对象时鼠标变为文本选择样式 */
a { cursor: pointer; } /* css注释： 设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） */
body { cursor: url("小图片地址")} /* 设置鼠标指针默认为一个小图片 */