从零开始学习前端开发 — 8、常见浏览器兼容性问题及图片整合技术
一、常见浏览器兼容性问题
1.双倍浮动bug描述：块状元素设置了float后，又设置了横向的margin，在IE6下显示的margin值要比设置的值大
解决方案： 给float的元素添加display:inline;将其转换为行内元素
2.表单元素行高不一致
解决方案：
方案一： 给表单元素添加 vertical-align:middle;
方案二： 给表单元素添加 float:left;
3.IE6不识别高度小于10px的容器
解决方案：
方案一: 给元素设置 overflow:hidden;
方案二: 给元素设置 font-size:0;
4.放在超链接中的图片默认有边框(在某些浏览器中)
解决方案：
给图片添加border:0;或border:none;
5.IE6不识别min-height属性
解决方案：
方案一： min-height:100px; _height:100px;
方案二： min-height:100px; height:auto!important; height:100px;
6.图片默认有空隙
解决方案：
方案一：给img添加float属性 (适用于有多张图片在一行显示的情况)
方案二：给img添加display:block; (适用于只有一张图片的情况)
7.百分比bug
描述：父元素宽度100%，子元素宽度50%，在IE6下50%+50%大于100%，右侧的子元素会掉下来
解决方案：
给右侧浮动元素清除右浮动 clear:right;
8.IE浏览器不识别opacity属性
解决方案：针对IE浏览器写透明度设置：
filter:alpha(opacity=数值); （取值范围1-100）
eg: .box{
opacity:.6;
filter:alpha(opacity=60);
}
9.鼠标指针bug
描述：cursor的hand属性只有IE浏览器识别，其他浏览器不识别
解决方案：
使用cursor:pointer;IE6及以上浏览器和其他浏览器都识别
注： cursor:pointer;是将鼠标指针的形状设置为手型
10.按钮默认大小不一
解决方案：
方案一：用a标签模拟按钮
方案二：如果按钮是一张图片，直接将图片作为按钮的背景图片插入即可
11.上下margin重叠问题
描述：当给上面元素设置margin-bottom,给下面元素设置margin-top，此时只能识别其中较大的那个值
解决方案：
方案一：margin-top和margin-bottom只设置其中的一个值
方案二：给上面的元素外面包一个容器，并设置overflow:hidden;
二、css hack
1.概念:针对不同内核的浏览器出现的兼容性问题的处理方法就叫做css hack
2.过滤器
a）下划线属性过滤器语法： 选择器{_属性:属性值;}
eg: .box{height:150px;_height:100px;}
注：下划线属性过滤器只有IE6及以下版本识别，其他浏览器不识别
b)!important关键词过滤器语法: 选择器{属性:属性值!important;}
eg: .box{background:red!important;background:blue;}
注：加!important的css属性优先级最高，但是IE6及以下版本的浏览器不识别
c)*属性过滤器语法： 选择器{*属性:属性值;}
eg: .box{background:blue;*background:pink;}
注：*属性过滤器只有IE6，IE7识别，其他浏览器都不识别
d) \9语法: 选择器{属性:属性值\9;}
注： 只有IE6，7，8识别，其他浏览器都不识别
e) \0语法: 选择器{属性:属性值\0;}
注：IE8及以上浏览器识别，其他浏览器都不识别
三、市场主流五大浏览器内核
1.IE浏览器 内核： Trident(IE内核)
2.Mozilla Fox（火狐） 内核：Gecko
3.Safari(苹果浏览器),Chrome（谷歌浏览器） 内核：Webkit
4.Opera（欧朋） 内核：Presto
5.最新版本的chrome浏览器 内核：Blink
附录：
图片整合技术
一、Css sprites(图片整合技术)
概念：将多张背景图片整合到一张背景图中，通过background-position来实现背景图定位技术称为图片整合。
我们也把图片整合技术叫做精灵图，雪碧图，滑动门技术。
二、图片整合的优势（优点）
1.将多张图片整合到一张图中，减少了对服务器的请求次数，减轻了对服务器的压力，加快了图片的加载速度。
2.同时也减小了图片体积，达到了网站性能的优化。
SEO优化
SEO—搜索引擎优化分为站内优化和站外优化两个方面
站内优化：
1.页面标题优化:在head部分添加一个有意义的title标题
2.页面头部优化:在head部分添加关键词和描述
<meta name="keywords" content="" /> 关键词
<meta name="description" content=""/> 描述
3.超链接优化
a）给a标签添加title属性
b) 尽量避免将超链接放置在flash中，seo无法识别flash中的文字
c) 尽量避免使用图片热点链接
4.图片优化
给img标签添加alt和title属性
5.添加网站地图或网站导航
可以让用户以最快的速度找到要浏览的内容
6.给网站添加友情链接
7.静态页面比动态页面更有利于搜索引擎优化
注：随着搜索引擎的不断改进，搜索动态页面也会变得更加容易
8.避免"大体积"的页面，代码结构合理清晰
站外优化：
百度推广
网站流量分析
网站品牌建设
