前端兼容性问题总结(1)

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量387 收藏 8
点赞数 5
分类专栏： 程序员 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84091580/article/details/138982261
版权

错位问题

/IE6中，这样的多个盒子并列时会发生向下偏移，应该对偏移的盒子添加负 margin-top 进行修正/

.box{

float: left;

}

IE6 奇数宽高问题

IE6 中盒子的宽(width) 和高(height)设置为奇数时会有 bug，尽量设置为偶数即可。

IE6 Peekaboo Bug

一个 div#top 中加入一个 div#float 向左浮动，然后加入一个或多个 div, 直到清除浮动为止：

float div
inside-div text!
inside-div text!
clear div

解决方法，给 #top 一个 height 或 width ：

#top{

height: 300px;

}

盒子坍塌

这个问题比较普遍，在盒内层元素设置外边距时会发生

/发生盒子坍塌/

#box{

height: 300px;

}

#box .inner-box{

margin:20px;

}

/修正/

#box{

height: 300px;

margin-top: -20px;

}

#box .inner-box{

margin:20px;

}

文字大小

字体大小在不同浏览上不一致。例如font-size:14px，在 IE 中的实际行高是16px，下面有3px留白；在 Firefox 中的实际行高是17px，下面有3px留白，上边1px留白；在 opera 中就更不一样了。解决方式统一指定行高 line-height

html{

font-size: 14px;

line-height: 14px;

}

另外，我们会遇到 font-size:62.5% 这样的定义，为了把默认的 16px 映射为 10px, 这样1em = 10px 更利于计算。

去除元素默认边距

有很多元素默认带有边距，对我们排版很不利。但利用通配符*去除边距存在性能问题，所以用下面语句清除默认边距

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{

margin: 0;

padding: 0;

}

低版本 IE 高度限定失效

一般的元素指定高度属性 height 可以固定该元素高度，但在低版本 IE 中无法固定元素高度，该元素高度依然会被内容撑开，需要注意。(宽度也一样)

IE6 不支持 png 透明效果

解决方式用滤镜

#box{

_background: none;

filter: progid:DXImageTransForm.Microsoft.AlphaImageLoader(src=‘路径’);

}

Firefox 的宽度问题

Firefox浏览器会的 body 比其他浏览器的 body 宽度小1个像素，注意设置其子元素（尤其 float 元素大小，防止排版混乱。

IE6中的吞吃问题

IE6 中为上下2个 div 中的上一个地址设置背景时，下一个 div 也会带有背景。类似的还有 overflow:scroll 时，出现的滚动条不完整。应该 分别对在上方的 div 和滚动条不完整的 div 加 zoom: 1样式。

IE6 图片格式问题

IE6 中的图片默认存在边框，应统一去除。同时图片下方会有空隙，用 font-size解决

img{

border: none;

font-size: 0;

}

IE中无法定义1px高度这样的小盒子

IE6 中的空元素高度不能低于19px，解决方式有四种：

1. 在元素中插入空注释 <!---->

2. 在元素中插入空格 &nbsp;

3. 加入 css: overflow:hidden;

4. 加入 css: font-size: 0;

IE6 z-index 失效

当父元素已设置 z-index 属性后，子元素的 z-index 会失效。

IE6中 select 始终高于 div

浮层 div 出现时隐藏 select，浮层 div 消失时再显示 select。

让 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

javascript 篇

============

innerText 和 innerContent

  1. innerText 和 textContent 的作用相同

  2. innerText IE8之前的浏览器支持

  3. innerContent 老版本的Firefox支持

  4. 新版本的浏览器两种方式都支持

和以上四种情况完全一致的还有parentElement(老IE)和parentNode

获取兄弟节点/元素的兼容性问题

ie8以前不支持previousElementSibling和nextElementSibling,以及诸如此类带有Element的元素属性。利用previousSibling和

nextSibling等不带Element的属性实现如下：

// 获取下一个紧邻的兄弟元素

function getNextElement(element){

var ele = element;

if(ele.nextElementSibling) return ele.nextElementSibling;

do{

ele = ele.nextSibling;

}while(ele && ele.nodeType !== 1);

return ele;

}

// 获取上一个紧邻的兄弟元素

function getPreviousElement(element){

var ele = element;

if(ele.perviousElementSibling) return ele.perviousElementSibling;

do{

ele = ele.perviousSibling;

}while(ele && ele.nodeType !== 1);

return ele;

}

// 获取第一个子元素

function getFirstElement(parent){

if(parent.firstElementChild) return parent.firstElementChild;

var ele = parent.firstChild;

while(ele && ele.nodeType !== 1) ele = ele.nextSibling;

return ele;

}

// 获取最后一个子元素

function getLastElement(parent){

if(parent.LastElementChild) return parent.LastElementChild;

var ele = parent.lastChild;

while(ele && ele.nodeType !== 1) ele = ele.perviousSibling;

return ele;

}

// 获取所有兄弟元素

function sibling(ele){

if(!ele) return null;

var elements = [ ];

var el = ele.previousSibling;

while(el){

if(el.nodeType === 1)

elements.push(el);

el = el.previousSibling;

}

el = element.nextSibling;

while(el){

if(el.nodeType === 1)

elements.push(el);

el = el.nextSibling;

}

return elements;

}

其它DOM操作

IE中有一些很好用的 DOM 方法，但是其他浏览器却没有，比如:

- ele.swapNode(anotherEle)用来交换节点;

- ele.removeNode()删除当前节点;

- ele.insertAgjacentHTML('position','HTMLText')和ele.insertAgjacentHTML('position',ele) 用来插入节点；

部分实现方式写在下面：

//实现swapNode方法

if(window.Node && !Node.prototype.swapNode){

Node.prototype.swapNode = function(node){

var nextSibling = this.nextSibling;

var parentNode = this.parentNode;

node.parentNode.replaceChild(this, node);

parentNode.insertBefore(node, nextSibling);

}

}

//实现removeNode

if(window.Node && !Node.prototype.removeNode){

Node.prototype.removeNode = function(){

this.parentNode.removeChild(this);

}

}

//insertAdjacentHTML和insertAdjacentElement可以用insertBefore代替

//由于有现成方法替换，这里不写具体实现了

js 操作 css 兼容性

//透明度

//非IE方法

ele.style.opacity = 0.2; //0-1

//IE

ele.style.filter = “alpha(opacity=100)”;

//float属性

//非IE

ele.style.float = “left”;

//IE

ele.style.cssFloat = “left”;

Array方法

array.filter();

if (!Array.prototype.filter)

{

Array.prototype.filter = function(fun /*, thisArg */)

{

“use strict”;

if (this === void 0 || this === null)

throw new TypeError();

var t = Object(this);

var len = t.length >>> 0;

if (typeof fun !== “function”)

throw new TypeError();

var res = [];

var thisArg = arguments.length >= 2 ? arguments[1] : void 0;

for (var i = 0; i < len; i++){

if (i in t){

var val = t[i];

if (fun.call(thisArg, val, i, t))

res.push(val);

}

}

return res;

};

}

array.forEach();

if (!Array.prototype.forEach) {

Array.prototype.forEach = function(callback, thisArg) {

var T, k = 0;

if (this == null) {

throw new TypeError(’ this is null or not defined’);

}

var O = Object(this);

var len = O.length >>> 0;

if (typeof callback !== “function”) {

throw new TypeError(callback + ’ is not a function’);

}

if (arguments.length > 1) T = thisArg;

while (k < len) {

var kValue;

if (k in O) {

kValue = O[k];

callback.call(T, kValue, k, O);

}

k++;

}

return undefined；

};

}

注册事件

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

if (k in O) {

kValue = O[k];

callback.call(T, kValue, k, O);

}

k++;

}

return undefined；

};

}

注册事件

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-P4rRp6xf-1715881862639)]

[外链图片转存中…(img-BUUpiTll-1715881862639)]

[外链图片转存中…(img-aDr9nSBc-1715881862640)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84091580
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端ios兼容性问题总结
dengkangning1111的博客
09-04 2404
前端IOS兼容性问题总结 低版本版本兼容问题 具体表现：低版本ios写es6语法会报错 解决方法：直接用es5语法或者使用babel， 参考：https://www.babeljs.cn/ 高版本兼容性问题 具体表现：fixed布局会被输入框给顶起来，原因好像是失去了焦点 解决方法：1.给输入框一个onblur事件，滚到上面去; onBlur(){ window.scroll...
前端跨浏览器兼容问题总结
tomorrownan的博客
10-19 5419
写小米网页的过程都是使用火狐浏览器调整页面布局，当用360浏览器和本机IE浏览器打开时，布局就错乱了。 问题1：在火狐浏览器上四张图片一排浮动在右侧，IE浏览器打开页面，产品图片一起跑到当前div块下方。引起错乱。 解决方法：在&amp;amp;lt;head&amp;amp;gt;头部加上X-UA-Compatible设置后，这种页面布局大的错乱就解决了。如下：&amp;amp;lt;meta http-equiv=&amp;quot;X-UA-Com..
前端兼容性问题总结
忧郁的蛋的专栏
03-20 6637
在 Web 前端开发中，浏览器兼容性问题是一个常见的挑战。由于不同的浏览器实现了不同的标准和规范，因此相同的代码在不同的浏览器上可能会有不同的表现，或者甚至无法正常工作。
前端 PC端兼容性问题总结
热门推荐
jia_love的博客
01-11 1万+
1.如果图片加a标签在IE9-中会有边框  　　解决方案: 1 img{border:none;} 2.rgba不支持IE8 　　解决方案:可以用 opacity 　　 eg: opacity:0.7;/*FF chrome safari opera*/ filter:alpha(opacity:70);/
关于前端浏览器兼容性问题的总结
goudan的博客
08-07 1726
关于前端浏览器兼容性问题的总结
h5前端兼容性问题及解决方法集合
醉逍遥neo的博客
05-20 3096
整理归纳一些之前记录的h5兼容性问题以及相应的解决方法，大多都是移动端的，持续更新… 1、iOS滑动卡慢 ios里父元素设置overflow:auto或scroll时，子元素滚动时没有滚动惯性，手指离开屏幕就立即停止滚动，所以会有一种卡和慢的感觉。 目前发现ios13及以上系统没有这个问题，但低版本的还会出现，需要解决。 解决方法： css里给滚动父元素设置： -webkit-overflow-scrolling: touch; 注意：这个css属性有很多坑，谨慎使用，例如会导致绝对定位元素会被父元
Safari兼容性问题总结
honeymoon_的博客
10-13 1566
这里写目录标题前言问题1. new Date(value) 前言 在这里记录自己遇到的Safari兼容性问题。 问题 1. new Date(value) safari不支持2021-01-01，而是支持2021/01/01。IE同理。谷歌两种都支持。 因此在使用new Date()时，要先进行时间格式的转换： 例如：将2021-01-01格式的时间转换为2021/01/01格式。 let newDate = myDate.split('-').join('/'); …待补充 ...
浏览器兼容性问题总结
越努力，越幸运！
02-17 2416
1、HTML对象获取问题 其他浏览器： document.getElementById("idName"); IE浏览器： document.idname document.getElementById("idName"); 解决办法： document.getElementById("idName"); 2. const定义常量问题 其他浏览器： document.getElementById("idName"); IE浏览器： document.idname doc..
H5兼容性问题总结记录
weixin_49022197的博客
07-22 806
h5开发苹果兼容的问题总结
前端面试——浏览器兼容问题
2401_84438160的博客
05-02 683
/第一个参数 事件名称//第二个参数 事件处理函数（监听者）//第三个参数 true捕获 false冒泡//IE9以后才支持// 兼容旧环境IE8的数组对象没有forEach方法，晕。所以自行声明即可。. 数组的indexOf()方法在IE8中的兼容性问题ie8浏览器不支持endsWith，trim()，startsWith等方法，在使用中就会遇见兼容性问题ie8 的数组没有map方法三、dom标签表现形式dom默认自定义样式dom定义样式video标签兼容。
前端兼容性问题总结(PC端)
09-27
以下是对PC端前端兼容性问题的详细分析和解决方案： 1. **图片加a标签在IE9-中会有边框** 解决方案：为img元素添加CSS样式`border: none;`，去除图片周围的边框。 2. **rgba颜色透明度不被IE8支持** 解决方案：...
浏览器兼容性总结
03-18
web前端开发，浏览器兼容性总结！
FF和IE的兼容性问题总结
09-06
FF和IE的兼容性问题一直是前端开发者面临的重要挑战。这些浏览器在处理JavaScript、DOM操作以及事件处理等方面的差异，可能导致代码在不同浏览器上表现不一致。以下是对这些兼容性问题的详细解析和解决策略： 1. **...
浅谈Html5移动端ios/Android兼容性总结
12-14
本文将深入探讨这些兼容性问题，并提供一些解决方案。 首先，我们需要理解`viewport`元标签的作用。`<meta name="viewport">`是为移动设备定义视口的关键，它决定了网页如何适应不同尺寸的屏幕。示例中的配置`,...
WEB前端面笔试题总结1
08-08
1. CSS浏览器兼容性问题：在前端开发中，CSS的浏览器兼容性是一大挑战。例如，不同的浏览器可能对某些CSS属性的解析和实现存在差异，如IE浏览器对盒模型、CSS3属性的支持程度不同。解决这些问题通常需要使用浏览器...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 466
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 79
【代码】TS如何处理js模块的类型？
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 990
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 853
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
Web前端面试必备知识点总结
8. **浏览器兼容性问题**：例如IE与其他浏览器对某些CSS特性的支持不同，需要使用条件注释或特性检测进行修复。 这些题目涵盖了前端开发者应知的基础和进阶知识，对准备面试或提升技能非常有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值