兼容_兼容性测试 - CSDN
  • 前端开发中常见兼容性问题

    千次阅读 2018-03-08 17:33:33
    W3C 规范的一种兼容模式,其中的 width 是包括 contentWidth, 左右padding, 左右border 在内的全部范围(height 也一样),类似于 box-sizing: border-box;,而且 table 的 font-size 不能从父元素继承。 以下情况会...

    一,怪异模式怪异模式是没有遵守 W3C 规范的一种兼容模式,其中的 width 是包括 contentWidth, 左右padding, 左右border 在内的全部范围(height 也一样),类似于 box-sizing: border-box;,而且 table 的 font-size 不能从父元素继承。

    以下情况会触发浏览器怪异模式(Quirks Mode):

    1.没写 DOCTYPE 触发怪异模式

    2.在<!DOCTYPE ...>前加<?xml version="1.0" encoding="utf-8" ?>, IE6 下会触发怪异模式

    3.在<!DOCTYPE ...>前加入<!-- keep IE7 in Quirks Mode -->, IE7进入怪异模式

    4.<!DOCTYPE ...>前有任何非空字符,会在IE6 下会触发怪异模式

    5.<!DOCTYPE ...>前有 XML ,在IE7 下不会触发怪异模式,但不能有其他非空字符

    检查document.compatMode,可以查看浏览器工作在哪个模式:值BackCompat为怪异模式,值CSS1Compat为标准模式


    二,display:inline-block 元素间有间隙

    <!-- 以下的 li 元素是 display: inline; 类型的 -->

    <!-- 这样写元素之间有间隙 -->

    <ul>

    <li>apple</li>

    <li>banana</li>

    <li>pineapple</li>

    <li>peach</li>

    <li>orange</li>

    </ul>

    <!-- 换个写法解决问题-->

    <ul>

    <li>apple</li>

    <li> banana</li>

    <li> pineapple</li>

    <li> peach</li>

    <li> orange</li>

    </ul>

    三,样式兼容性问题

    <!-- IE 按 Edge 模式渲染 -->

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <!-- IE 8 9 10 按 IE7 模式渲染 -->

    <meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />


    四,chrome下会让小于12px的文本字体默认为12px显示,让 chrome 支持小于 12px 的字体

    #box{ font-size: 8px; -webkit-text-size-adjust: none;}

    /* 但是,上面这个方法 chrome27 以后就不能用了。但我们可以用 css3 解决这个问题 */

    #box{ font-size: 12px; -webkit-transform: scale(0.75);}


    五,CSS Hack兼容性属性设置,注意书写顺序:优先写高等级浏览器支持方式、优先写支持浏览器多的方式

    /*以 color 属性为例,注意书写顺序*/

    #box{ color: #f00; //所有浏览器都支持

    color: #0f0 !important; //只有 IE6 无效

    color: #00f\9; //所有 IE 都有效

    color: #ff0\0; //IE8+ 有效

    color: #f0f\9\0; //IE9+ 有效

    *color: #fff; //仅 IE6, IE7 有效

    #color: #0ff; //仅 IE6, IE7 有效

    +color: #800; //仅 IE6, IE7 有效

    -color: #008; //只有 IE6 有效

    _color: #080; //只有 IE6 有效}

    由于后定义的属性覆盖先定义的属性,所有上面设置最后的效果为:

    IE6 为 #080

    IE7 为 #800

    IE8 为 #ff0

    IE9,10 为 #0f0

    其他 为 #f00


    展开全文
  • 一、图片整合、css精灵、精灵图、雪碧图、CSS sprites 优势:(把小图标都整合到一张图上面) 1:减少请求次数,缓解服务端得压力 2:减少图片得质量, 3:只需要修改一张或少张图片的颜色或样式来改变整个网页的...

    一、图片整合、css精灵、精灵图、雪碧图、CSS sprites
    优势:(把小图标都整合到一张图上面)
    1:减少请求次数,缓解服务端得压力
    2:减少图片得质量,
    3:只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
    最终得目的:提高项目速度,减少性能消耗
    缺点:
    (1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
    (2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂
    (3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置
    (4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
    图片整合需要注意:
    1:背景图一定是透明得
    2:根据情况得需求,把小图标的间距要处理好。
    3:尽量上下排列。

    二、浏览器兼容:
    主流浏览器:谷歌、火狐、欧鹏、苹果、Ie
    为什么会出现浏览器兼容问题?
    每个浏览器的核心源码是不一样的(浏览器内核)
    浏览器内核:(四大内核)
    Trident IE内核(代表作:IE)
    Gecko 代表作火狐浏览器
    webkit 苹果、老版本的谷歌
    blink 谷歌和欧鹏的开发商合作( 新版本谷歌、欧鹏 )

    常见的BUG:(非IE浏览器)
        	1: 按钮大小不一致:
            	    a:在按钮(边框去掉)的外层套一个父元素,把边框给父元素
            	    b: 统一大小/(用a标记模拟)页面中大部分按钮都是用a模拟。    
                       如果不想让a产生超链接:
    	     1、<a class="btn" href="javascript:void(0)"></a>
    	     2、<a class="btn" href="###"></a>
            	    c:如果按钮是一张图片 直接截图把图片作为按钮的背景图即可
    
        	2:表单元素对不齐
            	    hack(解决方案) : 添加浮动
        	3: 改变鼠标指针形状:
            	    属性:cursor:;
                	     auto  默认
                		crosshair  加号(常用)
                		text  文本
                		wait  等待
                		help  帮助
                		progress  过程
                		inherit   继承
                		move  移动(常用)
                		ne-resize  向上或向右移动
                		pointer   手形(常用)
    
        	4: 透明度:(兼容写法)
            		opacity:1; (对应下面兼容数值100倍)     
            		filter:alpha(opacity=100);(取值范围0-100)针对于IE
    
    优化:
        一、页面主题优化:
    	实事求是的写下自己网站的名字,网站的名字要合理,最好包含网站的主要内
    	容(比如“百度一下你就知道”)
    
        二、页面头部优化:(有时别人添加,有时候需要自己添加)
    <meta name="keywords" content="">向搜索引擎说明你的网页的关键词;
    <meta name="description" content="">告诉搜索引擎你的站点的主要内容;
    
        三、超链接优化:
    	1、采用纯文本链接,少用,最好是别用Flash动画设置链接,因为搜索引擎无法识别Flash上的文字.
    	2、按规范书写超链接,这个title属性,它既可以起到提示访客的作用,也可 以让搜索引擎知道它要去哪里.
    	3、最好别使用图片热点链接,理由和第一点差不多
    
        四、图片优化:
    	给每个图片标签加上alt属性,alt当图片无法显示时以文字作为替代显示出来
    
    展开全文
  • 浏览器相关及兼容问题 五大浏览器内核: •Trident (MSHTML) (三叉戟;三叉线;三齿鱼叉) •Gecko (壁虎) •Presto ( 迅速的) •Webkit (Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的...

    掌握图片整合的方法

    浏览器相关及兼容问题
    五大浏览器内核:
    •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布局的高效扩展性 。

    展开全文
  • 图片整合、css精灵、精灵图、雪碧图、CSS sprites 优势: 1:减少请求次数,缓解服务端得压力 2:减少图片得质量, 最终得目的:提高项目速度,减少性能消耗 图片整合需要注意: 1:背景图一定是透明得 ...

    图片整合、css精灵、精灵图、雪碧图、CSS sprites
    优势:
    1:减少请求次数,缓解服务端得压力
    2:减少图片得质量,
    最终得目的:提高项目速度,减少性能消耗
    图片整合需要注意:
    1:背景图一定是透明得
    2:根据情况得需求,把小图标的间距要处理好。
    3:尽量上下排列。
    主流浏览器:
    谷歌、火狐、欧鹏、苹果、Ie
    浏览器的世界大战 -> 争夺市场份额
    上世纪90年代:当微软发布IE 和 网景公司 网景领航者
    为什么会出现浏览器兼容问题?
    每个浏览器的核心源码是不一样的(浏览器内核)
    浏览器内核:(重点记)
    Trident IE内核(代表作:IE)
    Gecko 代表作火狐浏览器
    webkit 苹果、老版本的谷歌
    blink 谷歌和欧鹏的开发商合作( 新版本谷歌、欧鹏 )
    Presto ( Opera前内核 已经废弃 )
    名词:BUG hack filter
    bug出现的问题
    hack 解决方案
    filter 过滤器
    了解一下IE低版本浏览器经典的BUG:
    1:图片边框问题:
    bug : 当图片有超链接的时候 图片会产生蓝色的边框
    hack : img{border:0;}
    2: 图片间距:
    bug:图片的下方有大约3px距离:
    hack :
    a: 把图片标签和父元素都放在一行上没有回车键
    b: img{display:block;}
    3: 双倍浮向:
    bug: 如果一个元素添加float:left; 并且存在margin-left 会把margin双倍解析
    hack : 给浮动的元素添加 display:inline;
    4: 默认大小:
    bug: ie低版本默认情况下 不会让高度小于大约16px
    例如 : 设置高height:10px 保持在16px;
    hack : font-size:0; || overflow:hidden;
    常见的BUG:
    1: 按钮大小不一致:
    a:在按钮的外层套一个父元素,把边框给父元素
    b: 页面中大部分按钮都是用a模拟。
    如果不想让a产生超链接
    c:如果按钮是一张图片 直接截图
    2:表单元素对不齐
    hack : 添加浮动
    3: 鼠标指针:
    cursor:pointer;
    auto默认
    crosshair加号
    text文本
    wait等待
    help帮助
    progress过程
    inherit继承
    move移动
    ne-resize向上或向右移动
    pointer手形
    4: 透明度:
    opacity:1;
    filter:alpha(opacity=100) 针对于IE
    html 和 css渲染流程:
    回流与重绘:( 元素样式的变化对整个页面的渲染的影响 )
    reflow 与 repaint
    今天老师带领我们学习新课程,图片整合 优势,图片整合需要注意, 感觉老师讲的太快了,主流浏览器,浏览器内核:(重点记),名词:BUG hack filter,了解一下IE低版本浏览器经典的BUG,常见的BUG,基础太差有些跟不上,前段时间外出办事课程跟不上了,听不懂老师讲的了有点怀疑人生了马上要考试了感觉好紧张。希望能从头再学一遍多给些练习的时间。老师的期望太高了,我现在只停留在能听懂的阶段,只能比着老师的案例写,问题也归纳不出来,只感觉脑子里一团浆糊。虽然也能听得懂, 但是思维逻辑跟不上,案例转换方面不灵活老师一往深里讲就犯晕。到自己单独作的时候,却是有一种无从下手的感觉。也不知道能不能学会这一行,心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级,好想线下上课主要是家里有琐事打扰,想要全身心投入学习中!因为我想要改变以后的生活,不得不砥砺前行。

    展开全文
  • css图片整合

    2019-06-20 13:39:42
    图片整合的概念用background-position”来实现背景图片的定位技术,这种技术可以成为css sprites技术,又称为css精灵。方法将导航背景图片,按钮、背景小图标等小图片有规则的合并成一张背景图,即将多张图片合为一张...
  • 浏览器兼容性问题解决方案 · 总结

    万次阅读 多人点赞 2017-08-29 15:38:57
    浏览器兼容性问题解决方案 · 总结普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。贴士:内容都是自己总结的,不免会...
  • 常见浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2014-07-08 11:15:36
    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
  • 简要辨析向下兼容、向上兼容、向前兼容、向后兼容四个概念之间的关联与联系。简言之,向上兼容等同于作向前兼容,向下兼容等同于向后兼容。主流使用的是向前兼容和向后兼容。向后兼容中“后”指“落后”,站在新版本...
  • 最全整理浏览器兼容性问题与解决方案

    万次阅读 多人点赞 2018-02-26 11:44:36
    常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • 如何解决微信与此ipad不兼容

    万次阅读 2019-09-03 08:00:55
    如何解决微信与此ipad不兼容 如何解决微信与此ipad mini不兼容 尝试过很多方法,用pp助手和爱思助手安装以前版本 都不行,显示版本过低,需要升级, 但一升级,显示不兼容。 折磨了十分钟后, 最后这个方法搞定了: ...
  • 浏览器兼容性解决之道 前言  浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是...
  • 为什么会有兼容问题?由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要...
  • TeamViewer 提示版本不兼容怎么办?

    万次阅读 2018-08-30 10:01:58
    TeamViewer作为一款非常好用的远程控制软件,被很多用户所认可。平时在家里就可以连接办公室的计算机...原来,TeamViewer和其他大多数的软件一样,在版本问题上,都是高级版本兼容低级版本,低级版本无法兼容高级...
  • 向前兼容和向后兼容

    千次阅读 2018-04-17 13:05:26
    在理解向前兼容和向后兼容,先要知道这是用在什么架构中的。 能用到向后兼容和向前兼容, 那么肯定是存在接口概念的。 也就是说存在一个系统提供接口供外部使用, 外部应用使用这个接口。 然后就存在系统迭代周期...
  • CSS之flex兼容

    万次阅读 多人点赞 2017-05-27 20:40:36
    随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要...
  • 几款浏览器兼容性测试工具

    万次阅读 2018-03-05 18:17:03
    IETester这是我最先用的测试浏览器兼容性的工具,想必也是大家用的最多的一个,IETester是一个免费的Web浏览器调试工具,可以模拟出不同的js引擎来帮助程序员设计效果统一的代码。IETester可以在独立的标签页中开启IE...
  • IE兼容模式设置

    千次阅读 2019-07-21 21:59:02
    IE8以上的版本之后,增加了一个兼容模式。对于某些网站必须要启用兼容模式才能运行插件,兼容网站。那么IE兼容模式怎么设置呢? IE兼容性视图设置 1IE兼容模式设置---把网站启用兼容模式 如果需要把某些...
  • 向上兼容与向下兼容

    千次阅读 2016-07-15 12:59:27
    向上兼容 向上兼容(Upward Compatible)  xiànɡ shànɡ jiān rónɡ  在较低档计算机上编写的程序,可以在同一系列的较高档计算机上运行,或者在某一平台的较低版本环境中编写的程序可以在较高版本的环境中...
  • VS2015调试中出现上述问题,我们需要手动改变/ZI命令行选项 或者 /...(2)—>“代码生成”—>“启用函数集链接”—>选择“是 (/Gy)”如果遇到其他的命令行选项不兼容,类似于上面到“C/C++”目录下的各个选项中修改。
  • 一行代码解决各种IE兼容问题

    万次阅读 2019-09-26 09:16:06
    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 前端面试秘籍,欢迎star! 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的...
1 2 3 4 5 ... 20
收藏数 1,355,597
精华内容 542,238
关键字:

兼容