浏览器兼容问题_为何会出现浏览器兼容性问题?请详细描述处理兼容性问题的思路。 - CSDN
精华内容
参与话题
  • 常见浏览器兼容问题(面试重点)

    万次阅读 多人点赞 2017-12-05 22:27:18
    众所周知,浏览器兼容问题是开发人员经常会遇到的问题,它是由于不同浏览器的不同对代码的解析不同,而产生的在页面上显示的效果不同。那么,现在我把从工作当中发遇到的有关兼容问题及解决方案做个简单总结,...

    众所周知,浏览器的兼容性问题是开发人员经常会遇到的问题,它是由于不同浏览器的不同对代码的解析不同,而产生的在页面上显示的效果不同。那么,现在我把从工作当中发遇到的有关兼容性问题及解决方案做个简单总结,供各位参考:


    第一类:块状元素float后,有添加了横向的margin,在IE6下比设置的值要大(属于双倍浮动的bug)

    解决方案:给float标签添加display:inline,将其转换为行内元素


    第二类:表单元素行高不一致

    解决方案:给表单元素添加float:left(左浮动);或者是vertical-align:middle;(垂直对齐方式:居中)


    第三类:设置较小高度的容器(小于10px),在IE6下不识别小于10px的高度;

    解决方案:给容器添加overflow:hidden;


    第四类:当在a标签中嵌套img标签时,在某些浏览器中img会有蓝色边框;

    解决方案:给img添加border:0;或者是border:none;


    第五类:min-height在IE6下不兼容

    解决方案:

    1)min-height:value;

          _height:value;

    2)min-height:value;

         height:auto!important;

         height:value;


    第六类:图片默认有间隙

    解决方案:

    1)给img标签添加左浮动float:left;

    2)给img标签添加display:block;


    第七类:按钮默认大小不一

    解决方案:

    1)用a标签来模拟按钮,添加样式;

    2)如果按钮是一张背景图片,那么直接给按钮添加背景图;


    第八类:百分比的bug

    解决方案:父元素宽度为100%,子元素宽度各为50%,在IE6下各个元素宽度之和超过100%

    解决方案:给右边浮动的子元素添加clear:right;


    第九类:鼠标指针bug

    描述:cursor:hand;只有ie浏览器识别,其他浏览器不识别

    解决方案:cursor:pointer;IE6以上浏览器及其他内核浏览器都识别;


    第十类:透明度属性

    解决方案:针对IE浏览器:filter:alpha(opacity=value);(取值范围1--100)

    兼容其他浏览器:opacity:value;(取值范围0--1)


    第十一类:上下margin的重叠问题

    描述:给上边元素设置了margin-bottom,给下边元素设置了margin-top,浏览器只会识别较大值;

    解决方案:margin-top和margin-bottom中选择一个,只设置其中一个值;


    关于hack

    我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。





    展开全文
  • 浏览器兼容问题和解决方案

    千次阅读 2020-10-24 11:18:26
        所谓的浏览器兼容问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。 常见的浏览器内核     四种内核: Trident、Gecko、Blink、Webkit 类型 内核 ...

    简述

        所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。

    常见的浏览器内核(渲染引擎)

        四种内核: Trident、Gecko、Blink、Webkit

    浏览器 内核
    IE浏览器 Trident 内核,也成为 IE 内核
    Chrome浏览器 Webkit 内核,现在是 Blink 内核
    Firefox浏览器 Gecko 内核,俗称 Firefox 内核
    Safari浏览器 Webkit 内核
    Opera浏览器 最初是自己的 Presto 内核,后来加入谷歌大军,从Webkit又到了Blink内核
    360浏览器 Trident + Blink 双内核
    猎豹浏览器 Trident + Blink 双内核
    百度浏览器 Trident 内核
    QQ浏览器 Trident(兼容模式)+ Webkit(高速模式)

    CSS兼容性问题

        1. 不同浏览器的标签默认的外边距 ( margin ) 和内边距 ( padding ) 不同

        解决方案一: css 里增加通配符 * { margin: 0; padding: 0; }

        解决方案二: body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }

        2. 在 IE6及以下版本中设置了 float,同时又设置 margin,就会出现双边距浮动问题

        问题描述:任何浮动的元素上的外边距加倍

        解决方案:在 float 的标签样式控制中加入 display: inline; 将其转化为行内属性

        3. IE6下默认有行高

        解决方案:overflow: hidden;font-size: 0;line-height: xx px;

        4. 图片默认有间距

        解决方案:使用 float 属性为 img 布局

        5. IE6及以下版本,不支持最小高度 min-height
    .
        问题描述:IE6不支持 min-height 属性。即使定义了元素高度,如果内容超过元素的高度,IE6在解析时,会自动延长元素的高度

        解决方案:利用 IE6 不识别 !important,给元素设置固定高度,并且设置元素高度自动。height: auto !important; height: 300px; min-height: 300px; IE7 及其其他浏览器都识别 !important,虽然定义了 height: 300px,但是 !important 的优先级最高。所以内容超过 300px 时,还是会自动延长。

        6. IE8及以下版本不支持 opacity

        解决方案:opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity = 80)”;

        7. IE6以下的 3 像素问题

        问题描述:两个相邻的 div 之间有3个像素的空隙,一个 div 使用了 float,而另一个没有使用产生的。

        解决方案一:对另一个 div 也使用 float

        解决方案二:给浮动的 div 添加属性 margin-right: –3px,但是这样写,在其他浏览器又会不正常,所以我们需要添加 IE6 的 hack,在属性 margin-right 前添加下划线 margin-right: –3px。( IE6 以及更低版本的 hack,是在属性前面添加下划线)

        8. 块级元素上下边距合并问题

        问题描述:当上下相邻元素都设置了 margin 边距时,margin 将取最大值,舍弃小值

        解决方案:可以给子元素添加一个父元素,并设置该父元素:overflow: hidden;

        9. IE9 以下浏览器不识别 HTML5 新增标签问题

        解决方案:

    <!--[if lt IE 9]>
     	<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
    

        10. margin 塌陷问题

        问题描述:如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移

        解决方案一:给父盒子加一个边框 border: 1px solid black;

        解决方案二:给父盒子加 padding-top: xx px;

        解决方案三:给父盒子设置属性 overflow: hidden;

        解决方案四:给父盒子设置浮动 float: left;

        解决方案五:给父盒子设置为行内块 display: inline-block;

        11. 清除浮动

        问题描述:浮动元素撑不开父级容器

        解决方案一:额外标签法。在浮动的盒子内部最后,再放一个块级标签,在这个标签内使用 clear: both;

        解决方案二:使用 overflow 清除浮动。在父元素中添加一个属性 overflow: hidden;

        解决方案三:使用伪元素清除浮动。

    .clearfix::after {
    	content: "";      /* 伪元素必须给这个content='' */
        display: block;   /* 必须块级才能清除 */
        clear: both;      /* 核心代码 */
        /* 保证伪元素在页面中看不到 */
    	height:0;
        line-height:0;
    	visibility:hidden;
    }
    /* 兼容 IE 67 */
    .clearfix {
      *zoom: 1;
    }
    

        解决方案四:给父盒子设置高度

    IE属性过滤器(较为常用的hack方法)

    字符 例子 说明
    _ _height:100px; IE6可以识别
    * 、+ 、! *height:100px; IE6 / IE7可以识别
    \0/ height:100px\0/; IE8可以识别
    \9 height:100px\9; IE6、7、8、9、10可以识别

    浏览器CSS兼容前缀

    -o-transform: rotate(7deg);        // Opera
    -ms-transform: rotate(7deg);       // IE
    -moz-transform: rotate(7deg);      // Firefox
    -webkit-transform: rotate(7deg);   // Chrome
    transform: rotate(7deg);           // 统一标识语句
    

    JS兼容性问写法

        1. 获取网页宽和高的兼容性问题

    var winW = document.body.clientWidth || document.documentElement.clientWidth   // 网页可见区域宽
    var winH = document.body.clientHeight || document.documentElement.clientHeight // 网页可见区域宽
    // 以上为不包括边框的宽高,如果是 offsetWidth 或者 offsetHeight 的话包括边框
    
    var winWW = document.body.scrollWidth || document.documentElement.scrollWidth   // 整个网页的宽
    var winHH = document.body.scrollHeight || document.documentElement.scrollHeight // 整个网页的高
    
    var screenH = window.screen.height // 屏幕分辨率的高
    var screenW = window.screen.width  // 屏幕分辨率的宽
    var screenX = window.screenLeft    // 浏览器窗口相对于屏幕的x坐标(除了Firefox)
    var screenXX = window.screenX      // FireFox相对于屏幕的X坐标
    var screenY = window.screenTop     // 浏览器窗口相对于屏幕的y坐标(除了Firefox)
    var screenYY = window.screenY      // FireFox相对于屏幕的y坐标
    

        2. 获取滚动条距离的兼容性问题

    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop // 网页被卷去的高
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft // 网页左卷的距离
    
    

        3. 获取行外样式 currentStyle 和 getComputedStyle 的兼容性问题

    function getStyle(el, name){
        if(el.currentStyle) {
            // IE
            return el.currentStyle[name]
        } else {
            // Chrom, Firefox
    		return getComputedStyle(el, false)[name]
    	}
    }
    

        4. 用 “索引” 获取字符串每一项的兼容性问题

    var str = 'abcdefg'
    
    alert(str[0])  // 低版本的浏览器IE6, 7不兼容
    	
    alert(str.charAt(0))  // 兼容所有浏览器
    

        5. 使用 event 对象时的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        alert(e.clientX)
    }
    

        6. 阻止事件冒泡的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        if (e.stopPropagation) {
            e.stopPropagation()    // W3C标准
        } else {
        	e.cancelBubble = true  // IE..
        }
    }
    

        7. 阻止事件默认行为的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        if (e.preventDefault) {
            e.preventDefault()      // W3C标准
        } else {
        	e.returnValue = false   // IE..
        }
    }
    

        8. 获取事件目标对象的兼容性问题

    document.oncilck = function(ev) {
        var e = ev || window.event
        var target = e.target || e.srcElement         // 获取 target 的兼容写法,后面的为 IE
        var from = e.relatedTarget || e.formElement   // 鼠标来的地方,同样后面的为 IE...
        var to = e.relatedTarget || e.toElement       // 鼠标去的地方
    }
    

        9. 获取键盘按键码的兼容性问题

    document.onkeydown = function(ev) {
    	var e = ev || window.event
    	var code = e.keyCode || e.which || e.charCode
    	console.log(code)
    }
    

        10. 设置监听事件的兼容性问题

    // 设置监听事件
    function addEvent(el, type, fn) {        // 添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为 false
        if (el.addEventListener) {
            el.addEventListener(type, fn, false)    // 非IE
        } else {
            el.attachEvent('on' + type, fn)     // IE,这里已经加上on,传参的时候注意不要重复加了
        }
    }
    // 删除事件监听
    function removeEvent(el, type, fn) {  
        if (el.removeEventListener) {
            el.removeEventListener(type, fn, false)    // 非IE
        } else { 
            el.detachEvent('on' + type, fn)    // IE,这里已经加上on,传参的时候注意不要重复加了
        }
    }
    

        11. 获取DOM节点的兼容性问题

    // DOM节点相关,主要兼容IE 6 7 8
    
    // 获取下一个兄弟节点
    function nextnode(el) {
        if (el.nextElementSibling) {
            return el.nextElementSibling  // 非IE6 7 8 支持
        } else{
            return el.nextSibling  // IE6 7 8 支持
        }
    }
    // 获取上一个兄弟节点
    function prenode(el) {
        if (el.previousElementSibling) {
            return el.previousElementSibling   // 非IE6 7 8 支持
        } else{
            return el.previousSibling     // IE6 7 8 支持
        }
    }
    // 获取第一个子节点
    function firstnode(el) {
        if (el.firstElementChild) {
            return el.firstElementChild   // 非IE6 7 8 支持
        } else{
            return el.firstChild    // IE6 7 8 支持
        }
    }
    // 获取最后一个子节点
    function lastnode(el) {
        if (el.lastElementChild) {
            return el.lastElementChild    // 非IE6 7 8 支持
        } else{
            return el.lastChild     // IE6 7 8 支持
        }
    }
    

        12. 监听鼠标的滑轮滚动事件的兼容性问题

    // 给页面绑定鼠标滑轮滚动事件
    var scrollFunc = function(e) {
    	var e = e || window.event
        if (e.wheelDelta) {     // 判断浏览器 IE, Chrome滑轮事件
           	// 当滑轮向上滚动时
    	    if (e.wheelDelta > 0) {
    		    console.log("滑轮向上滚动")
    		    console.log(e.wheelDelta)
    	    }
    	    // 当滑轮向下滚动时
    	    if (e.wheelDelta < 0) {
    	        console.log("滑轮向下滚动")
    	        console.log(e.wheelDelta)
    	    }
        } else if (e.detail) {   // Firefox滑轮事件
        	// 当滑轮向上滚动时
    	    if (e.detail> 0) {  
    		    console.log("滑轮向上滚动")
    		    console.log(e.detail)
    	    }
    	    // 当滑轮向下滚动时
    	    if (e.detail < 0) { 
    			console.log("滑轮向下滚动")
    			console.log(e.detail)
    	    }
        }
    }
    
    // Firefox 使用 DOMMouseScroll 绑定滑轮事件
    if(document.addEventListener) {
    	document.addEventListener('DOMMouseScroll', scrollFunc, false)
    }
    // W3C标准   IE/Opera/Chrome 
    window.onmousewheel = document.onmousewheel = scrollFunc
    
    展开全文
  • 前端面试——浏览器兼容问题

    千次阅读 2019-06-07 09:52:38
    前端面试——浏览器兼容问题一、css样式兼容性问题 一、css样式兼容性问题 ie8浏览器不支持css3,像: ie8对选择器支持情况 ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:...

    一、css样式兼容性问题

    1. ie8浏览器不支持css3,像:
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    2. ie8对选择器支持情况
      ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:enable、:disable 、:checked
      ie8对before伪类不支持,引入兼容库js后,定位仍会出现问题,须修改边距值
    3. css hack
      “-″减号是IE6专有的hack
      “\9″ IE6/IE7/IE8/IE9/IE10都生效
      “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
      “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
      ie8也不支持flex布局,须改成其它布局;

    二、js语法

    1. 添加dom监听事件
      .addEventListener = function (type,listener,useCapture ) { };
      //第一个参数 事件名称
      //第二个参数 事件处理函数(监听者)
      //第三个参数 true捕获 false冒泡
      //IE9以后才支持
      // 兼容旧环境
    2. IE8的数组对象没有forEach方法,晕。所以自行声明即可。
    3. . 数组的indexOf()方法在IE8中的兼容性问题
    4. ie8浏览器不支持endsWith,trim(),startsWith等方法,在使用中就会遇见兼容性问题
    5. array.filter(); 参考文件
    6. ie8 的数组没有map方法

    三、dom标签表现形式

    1. dom默认自定义样式
    2. dom定义样式
    3. video标签兼容
      解决方法:在ie八浏览器下引入html5media.min.js 需要注意的是 把 三个文件放在同一文件夹下面. video 的width和height不要用百分比尽量用具体的像素(本人在ie8下面宽度用100%,html5media.min.js要报错)。
      input标签:

    四、其他

    1. DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档"
      具体会影响:
      对标记、attributes 、properties的约束规则
      对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于CSS 代码甚至 JavaScript 脚本的解析

    2. 设置浏览器渲染内核
      IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame,那么就用Chrome内核来渲染。

    3. HTML5的新标签(nav/footer等)IE中这些标签可能无法正常显示
      参考文章

    4. ie8不兼容SVG图形、Canvas,兼容方案:优雅降级。

    5. CSS3字体单位“rem”兼容方案:rem.js
      CSS3引入了新的字体大小单位rem,与em的“相对于其父元素来设置字体大小”的功能不同,rem是相对于根元素的字体大小比率单位,成了目前主流的单位之一。IE9+开始支持,IE8就只能通过引入js库来支持了。
      使用方法:在页面中引用rem.js文件。需要引用在页脚,也就是末尾,在所有css文件引用和DOM元素之后。
      参考文章

    6. 使用jQuery2.0以下的版本推荐使用1.8.3

    7. js书写时注意分号的书写,chrome,firefox等高级浏览器会自动识别分号,ie在低版本情况下只会报错,如果没注意1,使用了jQuery2.x以上的版本,jQuery内部也会报分号而引起的错误

    8. ie注释

    <!--[if IE 8]>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"></script>
    <![endif]-->
    

    。。。后续持续更新

    展开全文
  • 1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案: 可以使用Normalize来清除默认样式...

    1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同

    问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

    碰到频率:100%

    解决方案:

    可以使用Normalize来清除默认样式,具体可参考文章:来,让我们谈一谈 Normalize.css

    也可以使用如下代码:

    body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
    

    2,浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

    问题症状:常见症状是IE6中后面的一块被顶到下一行

    碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

    解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

    备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    3,浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

    问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

    碰到频率:60%

    解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

    备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    4,浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

    问题症状:IE6里的间距比超过设置的间距

    碰到几率:20%

    解决方案:在display:block;后面加入display:inline;display:table;

    备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

    5,浏览器兼容问题五:图片默认有间距

    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。

    碰到几率:20%

    解决方案:使用float属性为img布局

    备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(也可使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以尽量不要使用)

    6,浏览器兼容问题六:标签最低高度设置min-height不兼容

    问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

    碰到几率:5%

    解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

    备注:在B/S系统前端开发时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    7,浏览器兼容问题七:各种特殊样式的兼容,比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大,所以,只能现查资料通过给不同浏览器写不同的代码来解决。

    8,清除浮动:

    .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
    

    9,盒模型

    Element {
            box-sizing: border-box;
            /*box-sizing: content-box;*/
        }
    

    /* CSS hack*/

    我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

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

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

    比如这样一个CSS设置:

    div { 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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

    做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

    展开全文
  • 浏览器兼容问题一直是一个难缠的问题,从你开始想成为一名程序员,到深入学习,从最开始什么都会懂,到开始写代码.从你研究页面到最后的面试. 你经常能听到这个2个问题? 1.你是如何处理浏览器兼容问题的. 2.什么是响应...
  • 浏览器兼容问题解决方案 · 总结

    千次阅读 2018-09-25 09:37:28
    普及:浏览器兼容问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和补充...
  • 最全整理浏览器兼容问题与解决方案

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

    万次阅读 多人点赞 2018-01-27 09:21:50
    1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; padding: 0;} 2. 块属性标签float之后,又有横向的margin值,在IE6中显示...
  • 前端常见的浏览器兼容问题及解决方案

    万次阅读 多人点赞 2018-03-22 15:42:26
    市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。常见的浏览器内核:常见的...
  • 移动端 1. IOS移动端click事件300ms的延迟响应 ...这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,...
  • 主流浏览器兼容问题与解决方案

    千次阅读 2018-11-12 14:23:11
    主流浏览器兼容问题与解决方案  所谓的浏览器兼容问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站...
  • VUE2.0的浏览器兼容情况汇总

    万次阅读 2018-05-03 11:16:17
  • 页面在360浏览器下的兼容问题解决

    万次阅读 热门讨论 2014-05-26 14:09:25
    引言: 在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢?
  • 常见浏览器兼容问题与解决方案

    万次阅读 多人点赞 2014-07-08 11:15:36
    所谓的浏览器兼容问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
  • Vue 浏览器兼容

    千次阅读 2020-08-21 09:05:33
    vue支持所有兼容ECMAScript5的浏览器,因IE8不支持ECMAScript5特性,故IE8及其以下浏览器均不支持vue。...因PC端存在浏览器兼容问题,应用较少。在不考虑IE8兼容性的情况下(譬如,内部使用系统),可以使用vue。 ...
  • 360浏览器打开网页默认是兼容模式,导致有些网页打不开, 可以在网页头部加上代码,默认改为为极速模式打开,就正常了:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" /> 下面的代码会默认打开兼容...
  • Bootstrap浏览器兼容

    万次阅读 2017-01-16 14:22:54
    说到浏览器兼容性,就不得不提国内的浏览器占有率现状,这也使得国内的前端工程师总是需要针对各式各样的浏览器做CSS Hack,倘若你想要通过使用Bootstrap来避免这些额外的编码,那你就错了。 自从推出了...
  • 刚开始写页面的时候,会出现很多问题,当然兼容问题是最不容忽视的。然而就在刚刚我写代码的时候,在谷歌运行的很好的代码,突然转到360的三种模式的时候,就出现了各种问题。然而我也各种找解决办法,终于还是...
  • Element属性方法的浏览器兼容性概览

    千次阅读 2013-12-17 09:39:43
    参考自https://developer.mozilla.org/en-US/docs/Web/API/Element
  • css在360浏览器兼容问题

    万次阅读 2015-07-17 16:24:31
    在此并不从整体的角度来阐述,只是简单得记录下今天花了一个下午的时间才解决的问题。  下面是在360兼容模式的显示:    而在火狐浏览器、360浏览器的极速模式、甚至IE浏览器中显示都是正常的,如下图所示:   ...
1 2 3 4 5 ... 20
收藏数 274,398
精华内容 109,759
关键字:

浏览器兼容问题