浏览器兼容和精灵图

浏览器相关

1. 浏览器内核

浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。

五大浏览器内核
Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）
Gecko （壁虎）
Presto （ 迅速的）
Webkit （Safari 内核,Chrome 内核原型,它是苹果公司自己的内核，也是苹果的 Safari 浏览器使用的内核）
Blink (由 Google 和 Opera Software 开发的浏览器排版引擎)

2. 浏览器内核代表浏览器

Trident:IE、Maxthon(遨游)、腾讯 、Theworld 世界之窗、360 浏览器
代表作品 IE,因为 IE 捆绑在 Windows 中，所以占有极高的市场份额，又称 IE 内核或是 MSHTML，此内核只能应用于 windows 平台，且是不开源的。

Gecko:代表作品 Mozilla Firefox 是开源的,它的最大优势是跨平台，能在 Microsoft Windows、Linux 和 MacOS X 等主要操作系统上运行。

Webkit:代表作品 Safari、Chrome ， 是一个开源项目。

Presto:代表作品 Opera ，Presto 是由 Opera Software 开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。

Blink:由 Google 和 Opera Software 开发的浏览器排版引擎，2013 年 4 月发布。

CSS 兼容问题

1. 样式在各浏览器中解析不一致的情况，或者说 CSS 样式在浏览器中不能正确显示的问题称为 CSS bug.
2. CSS Hack: CSS 中，Hack 是指一种兼容 CSS 在不同浏览器中正确显示的技巧方法，修补 bug 的方法
3. Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter 是 hack 方法中的一种；

IE6 常见 CSS 解析 Bug 及 hack（解决方法）

1. 默认高度（IE6）
   描述：在 IE6 及以下版本中，部分块元素拥有默认高度（低于 18px 高度）
   hack1:给元素添加声明：font-size:0;
   hack2：给元素添加声明：overflow:hidden;
2. 图片间隙
   div 中的图片间隙
   bug：在块元素中插入图片时，有时图片会将块元素下方撑大三像素。
   Hack：给<img>添加声明：display:block; vertical-align:middle
3. 双倍浮向（双倍边距）
   描述：当 Ie6 及更低版本浏览器在解析浮动元素时，会错误地把浮向边的边界加倍显示。
   hack:给浮动元素添加声明：display:inline;
4. 表单元素行高不一致(IE,MOZ,C,O,S)
   bug：表单元素行高对齐方式不一致
   hack:给表单元素添加声明：float:left;
5. 按钮元素默认大小及样式不一致
   hack1:统一大小及样式/（用 a 标记模拟）
   hack2:input 外边套一个标签，在这个标签里写按钮的样式，把 input 的边框去掉。
   hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
6. 百分比 bug
   描述：在 IE6 及以下版本中在解析百分比时，会按四舍五入方式计算从而导致 50%加 50%大于 100%的情况。
   hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
   clear:left 清除左浮动
   clear:both 清除两边的浮动
7. 鼠标指针 bug
   描述：cursor 属性的 hand 属性值只有 IE8 浏览器识别;
   hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
   cursor 的值有:
   auto 默认
   crosshair 加号
   text 文本
   wait 等待
   help 帮助
   progress 过程
   inherit 继承
   move 移动
   ne-resize 向上或向右移动
   pointer 手形
8. 透明属性
   IE 浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8 以下)
   兼容其他浏览器写法：opacity:数值;(数值的取值范围 0-1,0.1,0.2,0.3—–0.9)
9. 当 li 里的 A 加 display:block 或 float:left 时，出现行高不一致，有的会多出 3 像素；
   hack1：给 a 加display:inline-block;
   Hack3：给 li 加 float，并加宽度；
10. 当 li 加 float 属性，并且 li 里的 A 转换成块元素,并给 a 加了高度时，IE6 里会出现每个 LI 单独占一行或阶梯状的情况；
    hack1：不给 a 标签加高度；
    Hack2：给 a 标签也添加 float；
11. 父元素里有块元素，如果给子元素添加添加margin-top,父元素会下来。
    Hack1：给父元素添加overflow:hidden;
    Hack2：给子元素添加 float；
    Hack3：给父元素加边框；

或者用其他的方法达到我们想要的效果：如给父元素加padding-top

图片整合(精灵图)

用 background-position”来实现背景图片的定位技术,这种技术可以成为 css sprites 技术，又称为 css 精灵。

将导航背景图片，按钮、背景小图标等小图片有规则的合并成一张背景图，即将多张图片合为一张整图，再利用 background 属性进行背景定位，用数字精确的定位出背景图片在布局盒子中的位置；

优点: 1)通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。 2)通过整合图片来减小图片的体积。

注意点: 1)根据实际容器的大小，小图片和小图片之间要留有足够的空间 2)开发和修改时需要精确测量每一个背景单元的精确位置，测量和修改起来比较麻烦。

滑动门技术:

1. 什么是滑动门
   滑动门是一个形象的称呼，它利用 CSS 背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果
2. 滑动门特征
   通过滑动门技术，可以使 CSS 设计出来的导航菜单兼具传统布局的图像效果，与 CSS 布局的高效扩展性 。

---

本文作者：人模人样的搬砖老段
本文链接：浏览器兼容和精灵图
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

---

最后更新于:2019/01/21

赏

谢谢你让我少搬一块砖

支付宝

微信