css3低版本浏览器兼容性问题

什么是浏览器兼容性问题？
浏览器内核不同，对同一段代码会有不同的解析，就会造成页面效果不统一的情况，进而造成浏览器兼容性问题。
各个浏览器内核：

浏览器类型内核 JS引擎
IE Trident JScript
Firefox Gecko TraceMonkey
Chrome Webkit,Blink V8
Safari Wbkit SquirrelFish Extreme
Opera Presto Carakan
解决思路及方案

一、浏览器css样式初始化
由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，以防不同浏览器的显示效果不一样。

*{margin: 0;padding: 0;
}

二、优雅降级以及渐进增强

渐进增强是指：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级是指：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
它们的区别在于：
优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的供给。
渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应新版本浏览器的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
在代码风格上，优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写方式，如下：

.border{border-raiuds:3px;
-webkit-border-raiuds:3px;
-ms-border-raiuds:3px;
-moz-border-raiuds:3px;
-o-border-raiuds:3px;
}

渐近增强会优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性，如下：

.border{-webkit-border-raiuds:3px;
-ms-border-raiuds:3px;
-moz-border-raiuds:3px;
-o-border-raiuds:3px;
border-raiuds:3px;
}

三、使用现代化的css插件解决兼容问题。

css3低版本浏览器兼容性问题相关推荐

vite项目低版本浏览器兼容性问题
技术:vite+vue3.2+ts+vant 1.这个是还没打包的实现: 先说下问题: app内置的浏览器内核版本太低,导致用app内置浏览器打开,会出现白屏,引入vconsole调试了一下,发现一个 ...
解决IE低版本浏览器兼容性差问题
<meta http-equiv="X-UA-Compatible" content="IE=edge">
低版本浏览器使用最新渲染模式以免IE不支持CSS3属性
1.让IE使用最新的渲染模式,告诉低版本浏览器使用最新渲染模式以免IE不支持CSS3属性 <meta http-equiv="X-UA-Compatible" content ...
解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
React 项目兼容低版本浏览器
兼容低版本浏览器真的是让人头大,不过现在好在有框架鱼插件的运用,让我们轻松的兼容低版本浏览器,本文中以 DvaJS Cli 举例下载 react-app-polyfill 和 core-js 插件 ...
jQ进阶篇--jQuery封装placeholder效果，让低版本浏览器支持该效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
AngularJS本地化,国际化国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
new Date(2019-05-10 08:00:00) 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题...
js new Date("2019-05-10 08:00:00") 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题. 在高级浏览器上new Date ...
vue 检测ie版本_Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

css3低版本浏览器兼容性问题

css3低版本浏览器兼容性问题

css3低版本浏览器兼容性问题相关推荐

最新文章

热门文章