兼容和图片整合(浏览器相关及兼容问题)
掌握图片整合的方法
浏览器相关及兼容问题
五大浏览器内核:
•Trident (MSHTML) (三叉戟;三叉线;三齿鱼叉)
•Gecko (壁虎)
•Presto ( 迅速的)
•Webkit (Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)
•Blink (由Google和Opera Software开发的浏览器排版引擎)
浏览器内核代表浏览器
*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 Bug、CSS Hack和Filter
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:给添加声明:display:block; vertical-align:middle
3) 双倍浮向(双倍边距)
描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边的边界加倍显示。
hack:给浮动元素添加声明:display:inline;
Css兼容问题
4)表单元素行高不一致(IE,MOZ,C,O,S)
bug:表单元素行高对齐方式不一致
hack:给表单元素添加声明:float:left;
5)按钮元素默认大小及样式不一 致
hack1: 统一大小及样式/(用a标记模拟)
hack2:input外边套一个标签,在这个标签里写按钮的样式,把input的边框去掉。
hack3:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。
IE6常见CSS解析Bug及hack(解决方法)
6)百分比bug
描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素添加声明:clear:right; 意思:清除右浮动。
clear:left:清除左浮动
clear:both:清除两边的浮动
7)鼠标指针bug
描述:cursor属性的hand属性值只有IE8浏览器识别;
hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor: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布局的高效扩展性 。
兼容和图片整合(浏览器相关及兼容问题)相关推荐
- 浏览器兼容与图片整合
浏览器兼容与图片整合 一.浏览器兼容 为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心也不同,架构代及码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床.再加上 ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
- 九宫图-图片轮播-兼容IE8和Chrome浏览器
在线测试 打包下载 九宫图-图片轮播-兼容IE8和Chrome浏览器
- 前端基础(17):图片整合提高浏览器速度
图片整合 1.图片整合的概念,使用图片整合的优势 2.实现图片整合的方法和技巧 3.滑动门的概念 4.浏览器的兼容的概念及原因 5.常见的CSS bug及CSS hack 一.图片整合的概念,使用图片 ...
- php 兼容火狐,PHP_CSS兼容IE与火狐浏览器超强兼容代码,如何让你写的代码更兼容火狐 - phpStudy...
CSS兼容IE与火狐浏览器超强兼容代码 如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了,就都兼 ...
- 不同浏览器jsp开发兼容问题
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 解决不同浏览器的css兼容问题
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表
IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观.本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版 ...
- 兼容低版本IE浏览器的一些技巧分享
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
最新文章
- smbpasswd 和 pdbedit 的区别
- FastDFS安装与使用
- Linux安装redis最新版5.0.8
- Mybatis like模糊查询的写法
- 自编码器及相关变种算法简介
- RN子组件获取redux数据
- 数据库笔记01:SQL Server系统概述
- 元胞计算机系统,元胞自动机
- 缓存框架——Redis(一)
- 每一次结束只是一次新的起点,深有体会。
- 用友U8去除凭证外部凭证标记
- 阿里云服务器添加CDN
- 量子计算机 因数分解,中国实现绝热量子质因数分解 或建量子计算机
- 渥太华大学计算机科学COOP,加拿大研究生:授课型和研究型
- vue动态style设置背景图片
- 泰拉瑞亚 1.4 搭建服务器教程
- 抢购茅台,618只能用这种方法
- 几个学习Python的网站推荐
- Mahalanobis距离 Vs. 欧氏距离
- 网络舆情分析-part1