web前端兼容整理

最新推荐文章于 2023-03-20 23:05:41 发布
最新推荐文章于 2023-03-20 23:05:41 发布
阅读量282 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44990056/article/details/107321859
版权
这篇博客主要探讨了前端开发中遇到的兼容性问题，包括Vue的兼容性处理、HTML5新标签在IE9以下的浏览器识别、CSS的浏览器差异如IE的hack问题、IE6的特殊问题，以及JavaScript中的事件绑定、日期处理、AJAX实现方式等差异，并提供了相应的解决方案。
摘要由CSDN通过智能技术生成

vue兼容
Vue 中使用 babel-polyfill 来兼容低版本浏览器
vue兼容

html兼容

1.H5新标签在IE9以下的浏览器识别

html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases

css兼容

1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
IE的条件注释hack：

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;无法使其居中
解决办法&#x

最低0.47元/天 解锁文章
sara-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端开发中浏览器兼容问题（三）
bwf_erg的博客
12-01 300
11.li中内容超过长度后以省略号显示 此方法适用于IE与OP浏览器  li {       width:200px;       white-space:nowrap;       text-overflow:ellipsis;       -o-text-overflow:ellipsis;       overflow: hidden;    }    12.为什么
前端兼容问题大全
10-17
关于前端兼容问题作出的相关解决方案,包括如何处理兼容
前端常见浏览器兼容性问题解决方案
热门推荐
田兴的博客
10-20 3万+
前言： 不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎 所以浏览器兼容性问题一般指：css兼容、js兼容 浏览器 内核（渲染引擎） Chrome谷歌 之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋 现已改用Google Chrome的Blink内核 一、css兼容 1. 不同浏览器的标签默认的ma
前端常见的浏览器兼容性问题及解决方案
weixin_30659829的博客
09-14 342
常见的兼容性问题： 1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同 解决方案： css 里增加通配符 * { margin: 0; padding: 0; } 2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题 解决方案：设置display:inline; 3、当标签的高度设置小于10px，...
浅谈前端兼容问题
mapbar_front的博客
04-14 6285
1、为什么会出现兼容问题 在各大浏览器厂商的发展过程中，他们其实对web的标准都有不同的实现，因为实现的标准的不同，所以会有兼容性的产生。通俗的说，就是对于web标准，有些浏览器支持，有些浏览器不支持。 2、从历史角度看兼容 早期IE是在浏览器的世界中，占据主导地位。所以它自身实现了很多不同于标准浏览器的东西，有css的，也有js的： Js方面： 1、滚动事件的兼容： scroll...
WEB前端测试点汇总整理
最新发布
03-29
【WEB前端测试点汇总整理】 在进行WEB前端测试时，我们需要关注多个方面，包括功能、性能和安全等关键要素，确保应用的稳定性和用户体验。以下是一些常见的测试点： 1. **输入框测试** - **字符型输入框**：测试...
Web前端知识整理 初学者.zip
12-01
在“Web前端知识整理 初学者.zip”这个压缩包中，包含了“Web前端思维导图”的详细内容。这个思维导图对于初学者来说是一个宝贵的资源，它系统地梳理了Web前端开发的基础概念、核心技术以及常见工具，帮助学习者建立...
应届生web前端简历模板
07-24
通过这份"应届生Web前端简历模板"，毕业生可以系统地整理和展示自己的技能，以期在激烈的竞争中脱颖而出。在准备简历时，务必确保信息准确、条理清晰，用实际项目和成果说话，这样才能更有效地打动面试官。
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
WEB前端技术笔记整理
08-28
**WEB前端技术笔记整理** 前端开发是构建网页或应用程序用户界面的关键部分，它涉及与用户的交互和页面动态呈现。在本笔记中，我们将深入探讨HTML、JavaScript（JS）、jQuery（JQ）、CSS以及HTML5这五种核心技术，...
页面前端布局的兼容问题
11-01
目前市面上流行的浏览器有目前主要主流的浏览器有IE6、IE7、IE8、IE9、foxfire浏览器、google浏览器、opera浏览器、safari浏览器和基于IE内核的（如：360）等其他的浏览器，这些浏览器在处理一个相同的页面时，表现或行为有时会有差异。 这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。 我们把引起这些差异的问题统称为“浏览器兼容性问题”。
WEB前端兼容问题处理
IT__zz的博客
09-23 227
WEB前端兼容问题处理 HTML对象获取问题 FireFox：document.getElementById(“idName”); ie:document.idname或者document.getElementById(“idName”). 解决办法：统一使用document.getElementById(“idName”); const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解决方法：统一使用var关键字来定义常量
js的一些兼容性写法
weixin_34080571的博客
11-28 185
//兼容性写法 document.onclick = function(ev){ var e = ev||window.event; var x = e.clientX; var y = e.clientY; } var winW=document.body.clientWidth||document.docuemntElement.cl...
前端兼容性问题
u011280778的博客
10-12 824
1、addEventListener() IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄: element.attachEvent(event, function); element.detachEvent(event, function); 实例 跨浏览器解决方法: var x = document.
【前端兼容】2016前端兼容笔记
LZGS_4的专栏
02-14 958
工作一年多，发现博客大家都不怎么写了，本着分享的原则，这一年大大小小也积累了一些知识，希望大家少踩坑，当然，踩坑并不一定是坏事，那是一种成长。前端制作考虑情况： 浏览器兼容，IE7、谷歌、火狐、360、百度等浏览器兼容； 屏幕适应，大屏和小屏的宽度适应，最小宽度和最小高度的限定； 考虑文字过多的情况； 表单输入设置提示选项，注意留有错误提示位置； 题目类页面切图时应考虑各种可能出现的题型，单选、多选
前端兼容性问题总结
忧郁的蛋的专栏
03-20 6746
在 Web 前端开发中，浏览器兼容性问题是一个常见的挑战。由于不同的浏览器实现了不同的标准和规范，因此相同的代码在不同的浏览器上可能会有不同的表现，或者甚至无法正常工作。
前端：13个常见兼容
熬猪的夜的博客
03-30 557
1.滚动条距离顶端的距离 (documentElement === html) var scroll_top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop); 2.滚动条距离左端的距离 var scroll_left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft); 3.getElementsB
前端开发兼容问题汇总
weixin_39559449的博客
06-01 453
2020年5月13日 火辣辣％1 $ S 一、高度计算问题-100vh不同浏览器处理机制不同 pc端的浏览器就很简单，因为浏览器的内容区域是不包含上方导航栏的，此时的html的100vh=100%； 但是移动端浏览器会包含顶部地址栏和底部按钮栏，不同的浏览器厂家处理的逻辑是不同的，现在测试的为：Safari，安卓和iOS手机的chrome，华为浏览器的100vh都是全屏，包括上下手机浏览器自己的bar，也是页面会被bar覆盖，此时内容区域=100vh-导航栏-按钮栏，但是导航栏和按钮栏高度不一致也不易获取，
"Web前端开发规范手册 1.0：整合web开发的标准
Web前端开发规范手册是一份整理的关于Web开发规范的手册，其版本号为1.0版。本手册的目的是为了规范并统一Web前端开发的流程和规范，以提高开发效率和代码质量。以下是对手册内容的详细总结： 本手册的第一部分是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值