处理浏览器兼容性

浏览器兼容
处理浏览器兼容性：
CSS Bug:
1.图片下方有空隙(垂直方向)，（div里放图片，本该div宽高由内容决定）
解决：给div加宽高 或 vertical-align:任意方向; 或转成块元素display:block;
2.图片水平方向上的间隙
解决：给父元素添加font-size:0; 或float:left; 或编写代码时图片标签无空格在一行显示
父元素设置词间距为负值word-spacing:-4px;（不常用）
3.图片超链接 在IE上有边框
解决：img{border:none;}
4.图片超链接 在hover时边框显示一半（超链接没撑开）IE上
解决：直接给图片加上边框为透明色,hover时再添加边框(滑过不闪动)
img{border:thin solid transprent} img:hover{border:thin solid red}
或在a上加，转成块元素、添加边框，宽度(滑过闪动) 所以不是很好
a:hover{display:block;border:1px solid green;width:180px;}
5.input与img垂直方向上对不齐(水平上，两者之间编写时无空格)
解决：img{nertical-align:bottom;}
6.不同浏览器上标签的默认内外边距不同
解决：*{margin:0; padding:0;}
7.两个块元素 竖向的margin值不会叠加，显示最大的(重叠了)
两个块元素 水平方向的margin值会叠加
8.IE6水平方向上margin会加倍(页面最左端与最右端)
解决：display:inline; (对其他浏览器没什么影响，针对6)
9.给子元素加margin-top,浏览器是加在了父元素上
解决：给父元素加padding-top 或给父元素加边框 border
或父元素padding-top:0.1px;子元素margin-top:20px;
10.经典3像素bug 在IE6上 浮动块元素处于同一行（行内块），并且两者之间有默认3像素
解决：设置未浮动的元素浮动
11.opacity:0.5;
filter过滤 alpha透明度值 在IE低版本写法 filter:alpha(opacity=50)
12.游标手指cursor cursor:pointer;
cursor:hand 仅IE
13.最小高度min-height IE6不可用
怎么样高度上做到自适应，给个高度、在高度上auto
height:50px;height:auto;
别的浏览器上设置min-height:30px;height:auto;

  CSS Hack:（少用）打补丁
    条件注释
    选择器
    属性
    ！important  IE6不支持

CSS新增样式：inset内阴影 默认是外阴影 起始位置值必写、其他可选 元素是圆角阴影也是圆角
1.box-shodow:x起始位置 y起始位置 模糊距离(值越小越清晰) 模糊尺寸 模糊颜色;
这些值可多组在一起使用：box-shodow:10px 10px 5px red,5px 5px 10px green;
2.圆角border-radius
3.图片边框 border-image 前提在元素上设置边框值 border
border-image-source:url(); 图片源
怎么拆分(量一下要裁的距离)：border-image-slice:20 20 20 20 ; fill(中间填充)
拆分是一定是九宫格 中间要有、不要裁剪过了，四角固定
裁剪时1234四个角固定 5678平铺或拉伸 9用来填充
显示边框的宽度 border-image-width：10px;
超出边框的量 border-image-outset:5px;
平铺 border-image-repeat:round; stretch拉伸 默认值
repeat 中间向两边平铺、最后多余裁剪 round尽可能的完整的平铺
组合写在一起用/分开

4.背景图片大小background-size:cover; contain , 20px 20px , 一个100%等同cover、100% 100%
5.背景图片的定位区域:background-origin:centent-box;背景图放于内容区
还有两个padding-box border-box 默认一般在content内，有padding时在padding内
6.背景裁剪 background-clip:content-box;内容以外背景裁减掉 padding-box border-box
text值、以文本之外裁剪掉类似content-box(text不好用，用content-box)
7.背景渐变色(形成背景图片) 默认颜色从下到上排
background:linear-gradident(方向 颜色开始 颜色结束);方向 to top
background:linear-gradident(to toop,green blue);
角度表示：角度deg(degree)0-360 开始水平0度、顺时针转动 默认颜色从下到上排
径向渐变：background:radial-gradient(形状(直径)/大小(先对与元素%) 位置(at top) 颜色);
形状ellipse椭圆(默认) circle圆形 默认位置center
background:radial-gradident()
8.重复渐变
background:repeating-linear-gradient(90deg,red,green);
background:repeating-radila-gradient(ellipse at left top,red 10%,green 20%);
重复渐变时，后面的颜色大小要比前面的大
兼容-webkit-repeating-radial-gradient();
-moz-repeating-radial-gradient();
9.文字描边 -webkit-text-stroke:宽度 颜色;(复合属性)必须写上webkit前缀 IE不支持
文字填充 -webkit-text-fill-color:red;与文本颜色无关、是在文本基础上填充上了一种颜色，文本色被挡住了
与text-shadow一起用