精华内容
下载资源
问答
  • web前端页面适配方法

    万次阅读 2018-10-23 09:06:42
    流式布局:就是百分比布局,非固定像素,内容向两侧填充,...适配要求: 1. 网页宽度必须和浏览器保持一致 2. 默认显示的缩放比例和PC端保持(缩放比例1.0) 3. 不允许用户自行缩放网页 满足这些要求达到了适...

    流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局

    视觉窗口:viewport,是移动端特有。这是一个虚拟的区域,承载网页的。

    承载关系:浏览器---->viewport---->网页

    适配要求:

    1. 网页宽度必须和浏览器保持一致

    2. 默认显示的缩放比例和PC端保持(缩放比例1.0)

    3. 不允许用户自行缩放网页

    满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。

    适配设置:

    如果任何设置都没有,默认走的就是viewport的默认设置

    去设置新的viewport设置,达到适配要求。

    <meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置

    viewport的功能:

    1. width 可以设置宽度 (device-width 当前设备的宽度)

    2. height 可以设置高度

    3. initial-scale 可以设置默认的缩放比例

    4. user-scalable 可以设置是否允许用户自行缩放

    5. maximum-scale 可以设置最大缩放比例

    6. minimum-scale 可以设置最小缩放比例

    在<meta name="viewport" content="" > content="" 使用以上参数

    1. width=device-width 宽度一致比例是1.0

    2. initial-scale=1.0 宽度一致比例是1.0

    3. user-scalable=no 不允许用户自行缩放 (yes,no 1,0)

    标准适配方案:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

    meta:vp + tab 快捷方式

     

    展开全文
  • WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"></script> <!...

    WEB前端浏览器兼容性问题(pc端及移动端)

    PC端

     (一)html部分
    
    1.H5新标签在IE9以下的浏览器识别 
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5shiv.js"></script>
    <![endif]-->
    html5shiv.js下载地址
    https://github.com/aFarkas/html5shiv/releases
    
    2.ul标签内外边距问题ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0
    
    
    (二)CSS样式的兼容性      
    
    1.css的hack问题:主要针对IE的不同版本,不同的浏览器的写法不同       
    IE的条件注释hack:       
    <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->          
    <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
    
    2.IE6双边距问题:IE6在浮动后,又有横向的margin,此时,该元素的外边距是其值的2倍       
    解决办法:display:block;
    
    3.IE6下图片的下方有空隙      
    解决方法:给img设置display:block;
    
    4.IE6下两个float之间会有个3px的bug       
    解决办法:给右边的元素也设置float:left;
    
    5.IE6下没有min-width的概念,其默认的width就是min-width
    
    6.IE6下在使用margin:0 auto;无法使其居中       
    解决办法:为其父容器设置text-align:center;
    
    7.被点击过后的超链接不再具有hover和active属性       
    解决办法:按lvha的顺序书写css样式,
    ":link": a标签还未被访问的状态;
    ":visited": a标签已被访问过的状态;
    ":hover": 鼠标悬停在a标签上的状态;
    ":active": a标签被鼠标按着时的状态;
    
    8.在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序
    
    9.IE6下无法设置1px的行高,原因是由其默认行高引起的       
    解决办法:为期设置overflow:hidden;或者line-height:1px;
    
    (三)JavaScript的兼容性
    
    1.标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;
    
    2.事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准
    
    3.window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
    
    4.在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值也是与1900的差值。          
    比如:var year= new Date().getYear();
    
    5.ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject
    
    6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
    其他浏览器:parentNode  parentNode.childNodes       
    IE:parentElement parentElement.children
    

    移动端

    1.当使用transform:translate3d(-50%,-50%,0)居中弹框(div)时,在pc端,内部的文字会模糊。
    解决办法:给body定义样式

    body{
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    }

    2.用position:absolute/fixed;把一个按钮固定在页面的底部,在android系统中,当调用输入法时,该按钮会被顶起

    解决办法:使用媒体查询@media screen and (max-width:400px){}当页面高度小于某一个值时,给元素一个top值

    3.IOS系统调用第三方输入法时,系统无法监测到input的input、focus、change、blur事件

    解决办法:计算input值的length的长度,判断input的值是否变化

    4.不同浏览器默认margin,padding不同。

    *{margin:0;padding:0;}

    5.不同浏览器的最小字体不同,有的是10px,有的是12px

    解决办法:设置字体时,不要小于12px,如果一定要小于12px,使用transform:sacle()进行缩放

    6.透明度opacity

    解决办法:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)

    7.文字两端居中text-align:justify;text-align-last:just;在移动端不起作用

    解决办法:使用&#160;代替空格

    展开全文
  • web前端浏览器兼容性问题(干货,亲测有效)

    万次阅读 多人点赞 2018-04-12 10:13:58
    20. 为什么web 标准中IE无法设置滚动条颜色了 解决办法是将body换成html <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ;charset=gb2312" /> <!...


     const问题

    说明:Firefox下,可以使用const关键字或var关键字来定义常量;
    IE下,只能使用var关键字来定义常量. 
    解决方法:统一使用var关键字来定义常量.

    12.          event.srcElement问题

    问题说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
    解决方法:使用srcObj =event.srcElement ?event.srcElement : event.target;

    14.          事件绑定

    IE:dom.attachEvent();

    其他浏览器:dom.addEventListener();

    标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值。

    14.          操作tr的html

    在ie9以下,不能操作tr的innerHTML

    14.          ajax略有不同

    IE:ActiveXObject

    其他:xmlHttpReuest




    16.          对象宽高赋值问题

    问题说明:FireFox中类似obj.style.height =imgObj.height的语句无效。

    1.        cursor:hand  VS   cursor:pointer

    firefox不支持hand,但ie支持pointer
    解决方法:   统一使用pointer

    2. innerText在IE中能正常工作,但在FireFox中却不行.  

    需用textContent。
    解决方法:
    if(navigator.appName.indexOf("Explorer")  >   -1){
           document.getElementById('element').innerText   =  "my   text";
    }   else{
            document.getElementById('element').textContent  =   "my   text";
    }

    3. CSS透明

    IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
    FF:opacity:0.6。

    4. css中的width和padding

    在IE7和FF中width宽度不包括padding,在Ie6中包括padding.

    5. FF和IEBOX模型解释不一致导致相差2px

    box.style{width:100;border1px;} 
    ie理解为box.width =100 
    ff理解为box.width =100 + 1*2 = 102  //加上边框2px

    解决方法:div{margin:30px!important;margin:28px;}
    注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

    6. IE5 和IE6的BOX解释不一致

    IE5下div{width:300px;margin:0 10px 0 10px;}
    div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

    7. ul和ol列表缩进问题

    消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
    经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

    8. 元素水平居中问题

    FF: margin:0auto;

    IE: 父级{ text-align:center; }

    9. Div的垂直居中问题

    vertical-align:middle; 将行距增加到和整个DIV一样高:line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行。

    10.          margin加倍的问题

    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

    例如:

    <divid=”imfloat”>
    相应的css为
    #imfloat{ 
    float:left; 
    margin:5px;/*IE下理解为10px*/ 
    display:inline;/*IE下再理解为5px*/}

    11.          IE与宽度和高度的问题

    IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

    比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

    #box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

    12.          页面的最小宽度

    如上一个问题,IE不识别min,要实现最小宽度,可用下面的方法:

    #container{ min-width: 600px;width:expression(document.body.clientWidth< 600? "600px": "auto" );}

    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

    13.          DIV浮动IE文本产生3象素的bug

    左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

    #box{ float:left; width:800px;} 
    #left{ float:left; width:50%;} 
    #right{ width:50%;} 
    *html #left{ margin-right:-3px; //这句是关键} 
    <div id="box">
    <div id="left"></div>
    <div id="right"></div>
    </div>

    14.          IE捉迷藏的问题

    当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

    有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。

    解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

    15.          float的div闭合;清除浮动;自适应高度

    ① 例如:<div id=”floatA”><div id=”floatB”><div id=”NOTfloatC”>

    这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

    这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在<divclass=”floatB”><div class=”NOTfloatC”>之间加上<div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:.clear{clear:both;}

    作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义:

    .colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

    对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

    <div id=”page”>

    <div id=”left”></div>
    <div id=”center”></div>
    <div id=”right”></div>

    </div>

    比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决:

    <div id=”page”>

    <div id=”bg” style=”float:left;width:100%”>

    <div id=”left”></div>
    <div id=”center”></div>
    <div id=”right”></div>

    </div>

    </div>

    再嵌入一个float left而宽度是100%的DIV解决之。

    ④万能float 闭合(非常重要!)

    关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix"即可,屡试不爽。

    /* Clear Fix */ 
    .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } 
    .clearfix { display:inline-block; } 
    /* Hide from IE Mac */ 
    .clearfix {display:block;} 
    /* End hide from IE Mac */ 
    /* end of clearfix */

    或者这样设置:.hackbox{display:table; //将对象作为块元素级的表格显示}

    16.          高度不适应

    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或padding时。

    例:

    #box {background-color:#eee; } 
    #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 
    <div id="box">
    <p>p对象中的内容</p>
    </div>

    解决技巧:在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

    17.          IE6下图片下有空隙产生

    解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom都可以解决.

    18.          对齐文本与文本输入框

    加上vertical-align:middle;

    <style type="text/css">
    <!--
    input { 
    width:200px; 
    height:30px; 
    border:1px solid red; 
    vertical-align:middle; 

    -->
    </style>

    经验证,在IE下任一版本都不适用,而ff、opera、safari、chrome均OK!

    19.          LI中内容超过长度后以省略号显示

    此技巧适用与IE、Opera、safari、chrom浏览器,FF暂不支持。

    <style type="text/css">
    <!--
    li { 
    width:200px; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis; 
    overflow: hidden; 
    }

    -->
    </style>

    20.          为什么web标准中IE无法设置滚动条颜色了

    解决办法是将body换成html

    <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <style type="text/css">
    <!-- 
    html { 
    scrollbar-face-color:#f6f6f6; 
    scrollbar-highlight-color:#fff; 
    scrollbar-shadow-color:#eeeeee; 
    scrollbar-3dlight-color:#eeeeee; 
    scrollbar-arrow-color:#000; 
    scrollbar-track-color:#fff; 
    scrollbar-darkshadow-color:#fff; 

    -->
    </style>

    21.          为什么无法定义1px左右高度的容器

    IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多:

    例如:overflow:hidden  zoom:0.08  line-height:1px

    16.怎么样才能让层显示在FLASH之上呢

    解决的办法是给FLASH设置透明

    <paramname="wmode" value="transparent" />

    22.          链接(a标签)的边框与背景

    a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。

    23.          超链接访问过后hover样式就不出现的问题

    被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

    Code:

    <style type="text/css">
    <!--
    a:link {} 
    a:visited {} 
    a:hover {} 
    a:active {} 
    -->
    </style>

    24.          FORM标签

    这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。

    25.          属性选择器(这个不能算是兼容,是隐藏css的一个bug)

    p[id]{}div[id]{}

    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    26.          为什么FF下文本无法撑开容器的高度

    标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:


    height:auto!important; 
    height:200px; 
    min-height:200px; 

    展开全文
  • 浏览器兼容问题一直是一个难缠的问题,从...这2个问题是提及最高,已经被问到最多的问题,是的,前端程序员这个是避免不了的.所以我才决定,放下学习其他js的时间,来写一个博客,让我们共同克服的这个问题 这个博客,先说...

    浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试.

    你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应式布局.

    这2个问题是提及最高,已经被问到最多的问题,是的,前端程序员这个是避免不了的.所以我才决定,放下学习其他js的时间,来写一个博客,让我们共同克服的这个问题

    这个博客,先说浏览器兼容问题?

     

    第一步?到底什么是浏览器兼容问题?

    (以下来自百度百科):浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

    第二步?浏览器兼容问题说的是啥? 

    1.其实说白了,就是我们的css和html在发展,推出了很多新的东西,比如css3和html5,而我们进步缓慢的IE浏览器是跟不上这个节奏的,所以就会出现不识别的东西,很多东西,在新的浏览器会识别,旧的就不会被识别(这里特别提醒一下,注意 window和mac,哪怕同样的版本的浏览器,也会不一样哦)

    2.再就是虽然识别了.但定义的范围或者一些默认的参数会不同,因为浏览器内核差异,最值得吐槽的是IE浏览器和别的很多浏览器都不一样,这样也不会兼容.

    其实就是基于以上2个原因,才会导致无论怎么找工作,都会问到,会用原生的js写东西吗?,毕竟很多新的js框架里封装的东西,老的浏览器就是因为上面的原因而不识别

     

    附赠一个连接http://developer.51cto.com/art/201004/192415.htm 这里介绍了各大浏览器对html5和css3的支持,方便你查看,你要的浏览器到底是否支持这些东西不?

    好了,上面说了一堆理论.希望在面试的时候能帮到你,让你不至于不知道如何和面试官聊天(当然上面的也不是很全),下面开始说代码吧,

    (以下内容,来自于各个网站+自己见解+资料整理)

     

    NO1.我们所熟悉的hack

    为了能让网站设计正常的运行于各种浏览器平台,网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。

    CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程,主要用来解决目前各类浏览器无法标准解析CSS样式,导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。  

    代码: 使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

     

    IE6认识的hacker 是下划线_ 和星号 *

    ◆IE7 遨游认识的hacker是星号 *

    比如这样一个CSS设置:

    height:300px;*height:200px;_height:100px; 

    IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

    IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

    如果你从上面的例子理解后,请看下面的一段话:(重在理解)

        1、针对I E 系列浏览器的网站设计代码 
    针对 IE 6的专属CSS Hack网站设计代码#id{display:block;}也就是在网站设计CSS属性前加一个小划线就好。
    针对 IE 7的专属CSS Hack网站设计代码#id{*display:block;}即在网站设计CSS属性前加上一个星号即可        针对 IE 8的专属CSS Hack网站设计代码#id{margin-top:10px 9;/*IE8*/}
    如上所示,解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。
      2、针对火狐的CSS Hack 网站设计代码        
    火狐可谓是最标准的浏览器之一了,网站设计技术只要稍稍不到位就能体现得淋漓尽致,所以不少网站设计师也很头痛,其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到 
    @-moz-document url-prefix()的{ } 里面就行了        
    例如:@-moz-document url-prefix(){#id{ display: block; }}。
      3、针对Safari的CSS Hack网站设计代码
    Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器,用来取代之前的Internet Explorer for Mac,使用了KDE的KHTML作为浏览器的运算核心。
    @media screen and (-webkit-min-device-pixel-ratio:0){#id { display: block; }}兼容性做法和火狐相近。
      4、针对 Opera 的CSS Hack 网站设计代码
    Opera即Opera Software ASA,是台式机、各种设备和移动网络浏览器市场的商业领袖,因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认,并在网上受到很多人的推崇。
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){head~body #id { display: block; }} (前面的一堆是在做浏览器的初始化)

     

    NO2.不同浏览器的标签默认的外补丁和内补丁不同

        问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
        碰到频率:100%
        解决方案:css里    *{margin:0;padding:0;}
        备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

    NO3.块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大
        问题症状:常见症状是ie6中后面的一块被顶到下一行
        碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
        解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
        备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    NO4.设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度
        问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
        碰到频率:60%
        解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
        备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    NO5.行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第3种)
        问题症状:ie6里的间距比超过设置的间距
        碰到几率:20%
        解决方案:在display:block;后面加入display:inline;display:table;
        备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。(此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。)(这是关于display的介绍)

    NO6.图片默认有间距
        问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题2中提到的通配符也不起作用。
        碰到几率:20%
        解决方案:使用float属性为img布局
        备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

    NO7.标签最低高度设置min-height不兼容
        问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
        碰到几率:5%
        解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
        备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    NO8.点击问题

    <body>
        <a href="#" onclick="doSet1(event);">点一下</a> 
        <a href="#" onclick="doSet2(event);">点两下</a> 
    </body>
    <script type="text/javascript">
        function doSet1(event) {
            alert(event.target.innerHTML);
        }
        function doSet2(event) {
            alert(event.srcElement.innerHTML);
        }
    </script>

    在IE下需要点击"点两下",在firefox下需要点击"点一下"
    因为内核不同,一些内置对象的属性名称是不一致的,所以相同的js脚本可能在firefox下可用,而在IE下就不能用。(经测试IE无此BUG)

    不过:js脚本屏蔽浏览器差异最简单有效的方式:使用jquery。因为jquery内部已经实现了屏蔽浏览器差异

    NO9.透明度兼容设置

    发生概率:主要看你要写的东西设不设透明度

    解决方案:一句话

    transparent_class {   

        filter:alpha(opacity=50);   

           -moz-opacity:0.5;   

           -khtml-opacity: 0.5;   

           opacity: 0.5;   

     

    opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.

    filter:alpha(opacity=50); This one you need for IE.

    -moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.

    -khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .

    NO10.Box Model的bug(盒子模型bug)

    描述:给一个元素设置了高度和宽度的同时,还为其设置margin和padding的值,会改变该元素的实际大小。

    解决办法:在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。

    NO11.IE6中的列表li楼梯状bug

    描述:通常在li中的元素(比如a)设置了浮动float,但li本身不浮动。

    解决办法:

    ul li{float:left;}

    或 ul li{display:inline;}

    NO12.li空白间距

    描述:在IE下,会增加li和li之间的垂直间距

    解决办法:给li里的a显式的添加宽度或者高度

    li a{width:20px;}

    或者

    li a{display:block;float:left;clear:left;}

    或者

    li {display:inline;}

    li a{display:block;}

    或者

    在每个列表li上设置一个实线的底边,颜色和li的背景色相同

    NO13.overflow:auto;和position:relative的碰撞

    描述:此bug只出现在IE6和IE7中,有两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative;且高度大于父元素,在IE6-7中子元素不会被隐藏而是溢出。

    解决方案:给父元素也设置position:relative;

    NO14.浮动层的错位

    描述:当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。

    解决方案:overflow:hidden;

    NO15.IE6克隆文本的bug

    描述:若你的代码结构如下

    <!--这是注释-->

        <div>

           ……

       </div>

    <!--这是注释-->

    很有可能在IE6网页上出现一段空白文本

    解决方案:

    使用条件注释

    删除所有注释

    在注释前面的那个浮动元素加上 display:inline;

    NO16.IE的图片缩放

    描述:图片在IE下缩放有时会影响其质量

    解决方案:img{ -ms-interpolation-mode:bicubic;}//这个是解决图片失真的自带属性只有IE有

    NO17.IE6下png图片的透明bug

    描述:使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。

    解决方案:

    .img{

    background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');

    _background:0;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');

    }

    img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}

    <imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />

    NO18.<iframe>透明背景bug

       描述:在IE浏览器中,<iframe>框架不会自动把背景设为透明

       解决方案:

        <iframesrc="content.html"allowTransparency="true"></iframe>

       在iframe调用的content.html页面中设置

       body{background-color: transparent;}

    NO19.禁用IE默认的垂直滚动条

    解决方案:

    html{

       overflow:auto;

    }

    NO20.给光标设置自定义样式时,静态光标文件.cur的不同浏览器的兼容性问题

    发生概率:反正我碰见了,在火狐浏览器下死活出不来,其他完美

      If你写的语句没有问题,完全兼容。但就是有一两个光标样式出不来,换成其他能显示的光标就可以正常显示,那么恭喜你,碰到跟我完全一样的问题。是.cur文件的格式问题

     

    .cur的格式根据图片颜色深度的不同会产生不同的格式:

     

    通过改变颜色深度,调整格式,可以实现跨浏览器兼容。

    P.S. 因为我不是专门搞UI的,也不太懂cur图片,有些光标颜色深度256 colors在火狐下不识别,有些就可以,所以具体问题具体分析,都改改看,反正我这边truecolor这个深度的是所有图片都完全可以的兼容的。

    下面会附上制作cur光标的一个小软件RealWorldCursorEditor,可以用它来改颜色深度

     

    cursor:url(images/arrow.cur),auto; /* auto是当自定义图标不起作用时鼠标的状态*/ 

    NO21.在IE6下有些元素看起来被隐藏了,但重新刷新后会再次出现,这是由于,一个容器的高度被浮动元素撑破后面又紧跟着非浮动元素,并且这些非浮动元素有一些定义了:hover链接。

    解决方案:各种清除浮动。

    NO22.a(有href属性)标签嵌套下的img标签,在IE下会带有边框。

    解决:解决办法是加上a img{border:none;}样式。

    NO23.input边框问题。

    去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效。
      ie6的默认CSS样式,涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则,先解析自身的默认CSS,再解析开发者书写的CSS,达到渲染标签的目的。IE6对INPUT的渲染存在bug,border:none;不被解析,当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。
    解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;,推荐用第三种方案。

    如果你觉得我帮到你了,买个肥宅快乐水,怎么样?哈哈哈哈哈哈

    展开全文
  • WEB前端屏幕适配

    千次阅读 2017-09-11 16:05:42
    也正是这个原因,现在很多网站的移动端网站都在使用rem单位作为适配工具。 注意事项: 1.整体的布局还是使用百分比 2.使用rem的最佳场景是,遇到例如多列带有图片的列表,常常需要图片固定宽高比 3.研究了...
  • 前端开发中,适配移动端我们主要有以下几种方式: 流式布局:百分比布局实现在移动端的宽高自适应 响应式布局:css3中媒体查询 REM(弹性)布局:实现盒子的宽高自适应 流式布局 流式布局在css2时代就有,主要是靠...
  • 前端适配浏览器是个极其XX的事情,找了一些资料,备注一下 浏览器 渲染引擎 JS引擎 内核(排版引擎) IE 4-7 Trident unversioned JScript(IE3.0-IE8.0) Trident IE 8 Trident 4.0 JScript(IE3.0-IE8.0)...
  • 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。...
  • 转自:https://blog.csdn.net/qq814374557/article/details/78675845
  • 前端常见的适配方法

    千次阅读 2021-05-27 08:58:43
    作为一个真正的前端攻城狮,我们经常会谈到web前端怎么做适配,然而平常经常做的事,一旦问起来突然好像脑子一片空白,只能想到rem、flex、媒体查询那些,因此想记录一篇文章以此警醒自己。 一、固定布局(pc端)...
  • 前端屏幕适配

    2021-07-26 16:56:27
    屏幕适配,一直是作为一个前端开发始终逃不掉的问题,这个话题可以追溯到最开始的PC端浏览器的不同分辨率,再到移动端不同的屏幕尺寸,一直伴随着前端工程师的日常的页面开发工作。所谓屏幕适配,可以理解为一个网页...
  • 2.vw单位慢慢开始得到浏览器的支持,实际宽度高度(单位:vw)=实际宽度高度/屏幕分辨率宽(1920)*100% 3.媒体查询,给不同分辨率设置单独的样式 在某公司写一个主系统pc端的后台管理系统的时候,就遇到适配...
  • 浏览器页面前端自适应方案

    千次阅读 2020-12-24 15:13:41
    取消使用viewport.js文件,如果遇到不能适配的公共组件,则拷贝一个新的版本,适配新的方案,逐步淘汰老版本。 // 引用该mixin,其中包含了默认的变量等 $default-font-size: 100; // 默认根字号大小,用于换算vw...
  • Web前端浏览器兼容性问题及解决方案
  • CSS浏览器适配设置

    千次阅读 2016-05-29 21:17:09
    1、适配语法 选择器名称 { 属性:方法(值); -webkit-属性:方法(值);  /*safari chrome*/ -ms-属性:方法(值); /*IE*/ -o-属性:方法(值); /*opera*/ -moz-属性:方法(值); /*Firefox*/ ...
  • WEB前端开发人员须知的常见浏览器兼容问题及解决技巧2016年09月14日 15:02:11 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求...
  • web开发前端适配

    2020-10-23 08:57:39
    移动端适配 修改根目录,index.html,设置屏幕宽度位20rem,可根据项目需求自定义 <script> function gethtmlfontsize(){ // 三个步骤: // 1.获取html的宽, let htmlwidth=document.documentElement....
  • 科普: rem rem是CSS3新增的一个相对单位(root em,根em)这个单位与em有什么区别呢? 区别在于 ... 2.这个单位可谓集相对大小和绝对大小的优点于一身,...3.除了IE8及更早版本外,所有浏览器均已支持rem。对于不支...
  • 总的来说,Web前端的书写由浏览器进行编译展示成我们看到的各种各样的界面,其中涉及到许许多多的小的东西。  1:命名规范  Web前端的各种各样的操作是分的非常细的,每一个我们看到的区域都是由很多可能说细小但...
  • Web前端H5项目适配暗黑模式背景H5项目适配深色模式方案声明 color-schememetaCSS通过 CSS 媒体查询图片适配JavaScript中判断当前模式&监听模式变化matchMediaaddListener()JavaScript监听判断 背景   近年来...
  • 通过使用css3 @media样式进行判断,判断不同分辨率浏览器(显示屏幕)显示不同宽度布局。 引入语法: 在css里使用如下标识符可以被ie识别而采用,其他浏览器会忽略if ie。 @media screen and (判断属性){ ...
  • web移动端最强适配(亲测有效)视口(viewport)适配rem单位适配flexible方案长屏短屏布局适配ios安全区域(Safe Area)适配横竖屏适配CSS Media Querieswindow.orientation软键盘的弹出-影响横竖屏判断的情况游戏接入h5...
  • Web前端开发之浏览器

    2017-03-08 15:07:51
    1:常用浏览器内核:IE、safari、Google ...开发中只需适配这几个内核就够了。 2:浏览器作用:a:渲染网页文件 b:响应用户的交互事件。 3:浏览器会保存已浏览网页的文件,所以第二次比第一次打开网页的速度更快。
  • 前端适配屏幕大小主要是百分比以及vw和vh还有rem 主要我们说的是 rem rem它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是我们前端常说的适配单位rem。 我们可以通过 ...
  • 前端适配可以说是前端工程师一个永恒的话题,而解决方案也是层出不穷,其目的都是为了在各个分辨率中最大程度还原设计稿。今天给大家介绍的是vw兼容方案,其原理就是根据视口宽度自动计算页面上的尺寸,无论高度、...
  • Vue前端适配vw方案

    千次阅读 2019-08-31 14:19:37
    前端适配的目的是对于不同屏幕的分辨率,最大程度按设计要求显示。vw方案的原理就是根据视窗宽度自动计算页面尺寸,包括高度、宽度和字体。1、检查项目 检查根据脚手架生成的项目,应该包括postcssrc.js,该文件的...
  • 众所周知,GitHub 网站在前不久支持了深色模式。我在看 GitHub 的时候发现浏览器默认的滚动条也变成了深色样式: ...顺便把常用的适配方案整理一下。 1. 声明 color-scheme 声明 color-scheme 之后,浏
  • web前端开发工程师需要与后端开发团队紧密配合,确保代码有效对接,优化前端应用性能。以下是学习啦小编整理的web前端开发工程师岗位的职责。web前端开发工程师岗位的职责1职责:1、负责产品的前端代码开发、页面...
  • 前端自适应适配规则

    2021-03-26 10:25:50
    前端自适应适配规则 看了很多博客写的很乱讲的很官方,因此在这里我稍微提起一点 首先通用文件适配器 等于屏幕宽度除以设计搞宽度*100除以16 在这里我一个一个解释 首先1.屏幕宽度等于你当前的屏幕宽度 2.设计搞...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,618
精华内容 5,847
关键字:

web前端浏览器适配