浏览器兼容性解决方案

最新推荐文章于 2024-03-03 16:30:00 发布

AAA_86

最新推荐文章于 2024-03-03 16:30:00 发布

阅读量458

点赞数

分类专栏：面试题

本文链接：https://blog.csdn.net/weixin_46071217/article/details/109231562

版权

本文探讨了浏览器兼容性问题，特别是CSS和JavaScript在不同浏览器中的表现。重点介绍了CSS兼容性，如标签默认样式差异、CSS3新属性的浏览器前缀需求，以及针对IE的特定问题。同时，讲解了JavaScript的事件绑定、阻止事件传播和默认行为，以及AJAX的跨浏览器兼容策略。

摘要由CSDN通过智能技术生成

什么是浏览器兼容性？

不同浏览器有着不同的内核，所以对网页的解析也有一定的差异
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
浏览器兼容性问题一般指：css兼容、js兼容

css兼容:

不同浏览器的标签默认的margin和padding不同

1.可以用CSS里 *{margin:0;padding:0;}但是性能不好
2. 一般我们用引入reset.css样式进行重置

1. CSS3新属性兼容问题：

css3新属性需要加浏览器前缀，然后兼容早期浏览器

-moz----- 火狐浏览器
-ms------ IE
-webkit----- Safari, 谷歌浏览器等使用Webkit引擎的浏览器
-o----- Opera浏览器(早期)

比如以下属性就需要加：

定义关键帧动画 @keyframes

css3中的变形（transform）、过渡(transtion)、动画(animation)

border-radius 圆角

box-shadow 盒子阴影

flex 弹性布局

使用的话就是以下：


.a {
   
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
   
	0% {
    opacity: 0; } 100% {
    opacity: 0; }
}
@-moz-keyframes fadeIn {
   
	0% {
    opacity: 0; } 100% {
    opacity: 0; }
}
@-o-keyframes fadeIn {
   
	0% {
    opacity: 0;