如何解决浏览器兼容性问题？ 是否可以通过调整css解决浏览器兼容性问题？
让我们来看看。 用这四个解决方案解决CSS浏览器的兼容性问题吧。
对我们来说，网络前端既是高薪专家，同时也是艰苦职业。 不仅是因为技术的更新换代快，更因为应该学习的知识比什么都多。 要解决所有的浏览器兼容性问题并不是一件容易的事，尤其是在浏览器普及到互联网的情况下。
解决CSS浏览器兼容性问题的四种解决方案
为什么会有浏览器兼容性问题？
不是因为浏览器制造商太多！
Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9.360安全浏览器，qq浏览器，世界之窗，TT，Sogou，opera，maxthon
重要的是，即使是不同制造商、甚至同一制造商的不同版本，对同一段的CSS的分析效果也不一致。 这样会导致页面显示效果不一致，还会产生兼容性问题。
多么希望Chrome能统一江湖啊~
解决CSS浏览器兼容性问题的四种解决方案
按浏览器列出的当前市场占有率
浏览器这么多，我们都不是兼容的。 对于用户数一般的产品，只要做好主流浏览器的匹配就可以了。
百度流量研究院提供的2018年8月至2019年2月的数据显示，Chrome占46.28%，IE类仍然占很大比重，反正任重道远啊~
解决CSS浏览器兼容性问题的四种解决方案
CSS浏览器兼容性问题的解决方案和解决方案
今天，我不想关注太多细节的问题。 例如，该css样式需要兼容性，但希望研究较大的解决方案。 主要包括四个方面：浏览器css风格初始化、浏览器私有属性、CSS hack语法和自动化插件。
展开全文
1 .初始化浏览器CSS样式
因为每个浏览器的css缺省样式都不一样，所以最简单有效的方法是对其进行初始化。 我相信很多朋友都写过这样的代码，在所有的css开始之前，将marin和padding设置为0以避免不同的浏览器显示效果不同。
边距： 0；
padding: 0；
关于浏览器CSS样式的初始化，如果没有丰富的经验，可能不知道该初始化什么。 在此，建议使用Normalize.css。 github star的数量接近3.4万，从中选择了几种样式设定进行展示。 如下所示
html {
行高： 1.15；/* correctthelineheightinallbrowsers * /
- web kit-text-size-adjust :100；/* preventadjustmentsoffontsizeafterorientationchangesinios.* /
body {
边距： 0；
a {
背景颜色：传输；/* removethegraybackgroundonactivelinksinie 10.* /
img {
border-style: none；/* removetheborderonimagesinsidelinksinie 10.* /
我相信初始化CSS样式可以解决许多常见的兼容性问题，接下来我们来看看浏览器的专用属性。
2 .浏览器的专用属性
我们在常见的CSS属性前添加-webkit-、-moz--ms--等前缀。 这些是浏览器的专用属性。
为什么会出现私人属性呢？ 这是因为制定了HTML和CSS标准的组织W3C动作缓慢。
通常，一个W3C组织的成员会提出一些新的属性，如圆角border-radius，大家都认为很好，但W3C必须制定标准，进行复杂的流程、审核等。 浏览器制造商的营销很花时间，如果一个属性足够成熟，就会给浏览器增加支持。
但是，通过添加专用前缀(如-webkit-border-radius )来预支持新属性，以避免在以后W3C发布标准时发生更改。 日后W3C会公布标准，建立border-radius的标准格式，然后让新版本的浏览器支援border-radius格式。 一般前缀如下
-moz表示firefox浏览器的专用属性
-ms表示IE浏览器的专用属性
-webkit表示chrome，safari的私有属性
-o表示opera的私有属性
注意私有属性的顺序，在标准表示法的最后，将互换表示法放在前面
- WebKit-transform : rotate (-3d eg )； /*是Chrome/Safari*/
-moz-transform3360rotate(-3DEG )； /*是Firefox*/
-ms-transform3360rotate(-3DEG )； /*是IE*/
-o-transform3360rotate(-3DEG )； /*是Opera*/
transform:rotate(-3deg )；
为每个CSS属性编写这样的兼容性代码，无疑是对生命最大的浪费。 稍后我将介绍如何在自动化插件中处理它。
3. CSS hack
您可能需要为不同的浏览器或不同的版本编写特定的CSS样式。 为这种不同的浏览器/不同的版本编写相应的CSS代码的过程称为CSS hack！
CSS hack的写法大致分为条件hack、属性电平hack和选择器电平hack三种。
条件hack
条件hack主要对IE浏览器进行特殊设置
语法：
取得价格
keywords
if后面的条件有六个选择：“否”、“大于”、“大于或等于”、“小于或等于”、“小于或等于”和“非指定版本”
否：指定是IE还是IE的版本。 关键字：空
大于-选择大于指定版本的IE版本。 关键词： gt(greaterthan ) ) ) ) ) ) ) )。
大于或等于：选择大于或等于指定版本的IE版本。 关键字： GTE(greaterthanorequal ) )。
小于：选择小于指定版本的IE版本。 关键字： lt(lessthan ) )。
小于或等于：选择小于或等于指定版本的IE版本。 关键字： LTE(lessthanorequal ) )
非指定版本：选择除指定版本外的所有IE版本。 关键字：
version
IE浏览器版本，如6、7、8
IE10及以上版本已将条件注释特性移除，使用时需注意。
§ 举例
<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
属性级hack
属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
§ 语法：
selector{<hack>?property:value<hack>?;}
§ 取值：
：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（）更为合适。
：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（）的认知度更高
9：选择IE6+
：选择IE8+和Opera15以下的浏览器
§ 举例
如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后
.test {
color: #0909; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
选择符级hack
选择符级hack是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
§ 语法：
<hack> selector{ sRules }
§ 取值：
§ 常见的选择符级hack有
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
§ 举例：
* html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */
看到这里，我不得不为前端人员自豪，这也太难了吧~~
不过花大力气解决这些兼容性问题， 并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了，随着时间的流逝，这些技术的价值也会越来越小，怎么花最小的力气解决css兼容性问题，让我们把更多的时间留给美好的生活，才是关键，好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理。
4. 自动化插件
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。
//我们编写的代码
div {
transform: rotate(30deg);
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
目前webpack、gulp、grunt都有相应的插件，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让CSS兼容性浪费你的时间！
常见的浏览器兼容性问题与解决方案——CSS篇
1、不同的浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。
碰到频率：100%
解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。
备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题。
2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状：常见的是IE6中后面的一块被顶到下一行。
碰到频率：90%
解决方案：在float的标签样式控制中加入display:inline；将其转化为行内属性。
3、设置较小高度标签，在IE6、IE7和遨游浏览器中高度超出自己设置的高度
问题症状：IE6、IE7和遨游浏览器里这个标签的高度不受控制，超出自己设置的高度。
碰到频率：60%
解决方案：给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你设置的高度。
4、行内属性标签，设置display：block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距。
碰到频率：20%
解决方案：在display：block；后面加入display：inline；display：table；
5、图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了margin：0；和padding：0也不起作用。
碰到频率：20%
解决方案：使用float属性为img布局。
6、标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。
碰到频率：20%
解决方案：如果我们需要设置一个标签的最小高度是200px，需要进行的设置为：{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}
特别声明
本文仅代表作者观点，不代表本站立场，本站仅提供信息存储服务。