HTML5基础--兼容性处理

浏览器内核            代表浏览器                添加的私有前缀
presto                          欧朋                               -o-
trident                           IE                                 -ms-
gecko                         火狐                               -moz-
webkit                   谷歌和Safari                      -webkit-
blink                 谷歌和欧朋一起开发

 常见的兼容问题【图片4个，表单1个，鼠标1个，margin2个】

• 图片会将父元素撑大3px以上，图片3px问题

    a.给img设置vertical-align（常用）
    b.给img设置display：block

• 当图片（所有的行内块元素）横着排列的时候，水平之间会存在一定的间距

    a.给img设置浮动（常用）
    b.将多个图片代码写在一行上

• 给图片添加超链接后，在IE低版本会有边框

    给图片的border设置为0

• 图片是png-24格式时在IE6版本不是透明的

    将图片保存成png-8或者GIF格式（GIF格式会保持精度不变）

• 表单元素在垂直方向没对齐，例如：input框与button框

    a.给他们都添加浮动（常用）
    b.加vertical-align

• 鼠标手型【高版本认识pointer，低版本认识hand】

    cursor：pointer；cursor：hand；同时都写上

• margin在垂直方向的粘连问题

    a.给父元素加overflow：hidden（常用）
    b.给父元素添加border
    c.用padding代替

• margin在垂直方向的塌陷问题

    a.在其中一个元素身上添加足够的间距
    b.给其中一个元素添加父元素，给父元素添加样式overflow：hidden（了解）