360浏览器设置兼容模式怎么设置（如何让edge浏览器兼容ie内核）
如何解决世界之窗首页设置前端开发中的浏览器兼容问题？
如何解决浏览器兼容性问题？可以通过调整css来解决浏览器兼容性问题吗？
让 让我们看一看。用这四个方案来解决CSS浏览器的兼容性问题。
对于我们来说， 前端不仅是高薪的专家，也是一份辛苦的工作。不仅仅是因为技术更新换代快，还因为要学的知识比什么都多。解决所有浏览器的兼容性问题并不容易，尤其是在浏览器普及到互联网的情况下。
CSS浏览器兼容性问题的四种解决方案
为什么会出现浏览器兼容性问题？
不是因为浏览器厂商太多！
Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9.360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，傲游。
重要的是，即使是不同的厂商，甚至是同一厂商的不同版本，对同一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；
划 0；
}
关于浏览器CSS样式的初始化，如果你不 没有丰富的经验，你可能不知道初始化什么。这里推荐使用Normalize.css，github star的数量接近34000，选择了几种样式设置进行显示。如下
html {
行高1.15；/ correcthelineheightinallbrowsers /
-web kit-text-size-adjust :100；/ preventadjustmentsoffontsizeafterorientationchangesinos。 /
}
正文{
边距0；
}
一个{
背景色透射；/ removethegraybackgroundonactivelinksinie 10。 /
}
img {
border-style:无；/ removetheborderonimagesisidlinksinie 10。 /
}
我相信初始化CSS样式可以解决很多常见的兼容性问题。接下来，让我们 让我们看看浏览器的特殊属性。
2.浏览器的特殊属性
我们在常见的CSS属性前添加前缀，如-webkit-、-moz-ms-。这些是特定于浏览器的属性。
为什么会有私有属性？这是因为开发HTML和CSS标准的组织W3C行动缓慢。
通常一个W3C组织的成员会提出一些新的属性，比如rounded border-radius，大家都觉得很好，W3C必须制定标准，进行复杂的流程和审核。浏览器厂商的营销需要花费大量的时间。如果一个属性足够成熟，就会给浏览器增加支持。
通过添加一个特殊的前缀(比如-webkit-border-radius)来预支持新的属性，避免以后W3C发布标准时发生变化。未来W3C会发布标准，建立border-radius的标准格式，然后让新的浏览器支持border-radius格式。一般前缀如下
-moz代表火狐浏览器的一个特殊属性。
-ms代表IE浏览器的私有财产。
-webkit代表chrome和safari的私有财产。
-o代表opera的私有财产。
注意私有属性的顺序，将交换符号放在标准符号的末尾。
- WebKit-transform :旋转(-3d eg)；/是Chrome/Safari/
-moz-transform 3360旋转(-3度)；/是Firefox/
-ms-transform 3360旋转(-3度)；/是IE/
-o-transform 3360旋转(-3度)；/是歌剧/
变换旋转(-3度)；
为每
个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及以上版本已将条件注释特性移除，使用时需注意。
§ 举例
lt!--[if IE]gt
ltpgt你在非IE中将看不到我的身影lt/pgt
lt![endif]--gt
lt!--[if IE]gt
ltstylegt
.test{color:red}
lt/stylegt
lt![endif]--gt
lt!--[if lt IE 9]gt
ltscript src=#34//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js#34gtlt/scriptgt
ltscript src=#34//cdn.bootcss.com/respond.js/1.4.2/respond.min.js#34gtlt/scriptgt
lt![endif]--gt
属性级hack
属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
§ 语法
selector{lthackgt?property:valuelthackgt?}
§ 取值
选择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。
§ 语法
lthackgt 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:0padding:0}。也可以使用其他网站的初始化代码。
备注这个是最常见的也是最容易解决的一个浏览器兼容性问题。
2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状常见的是IE6中后面的一块被顶到下一行。
碰到频率90%
解决方案在float的标签样式控制中加入display:inline；将其转化为行内属性。
3、设置较小高度标签，在IE6、IE7和遨游浏览器中高度超出自己设置的高度
问题症状IE6、IE7和遨游浏览器里这个标签的高度不受控制，超出自己设置的高度。
碰到频率60%
解决方案给超出高度的标签设置overflowhidden；或者设置行高line-height小于你设置的高度。
4、行内属性标签，设置displayblock后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状IE6里的间距比超过设置的间距。
碰到频率20%
解决方案在displayblock；后面加入displayinline；displaytable；
5、图片默认有间距
问题症状几个img标签放在一起的时候，有些浏览器会有默认的间距，加了margin0；和padding0也不起作用。
碰到频率20%
解决方案使用float属性为img布局。
6、标签更低高度设置min-height不兼容
问题症状因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。
碰到频率20%
解决方案如果我们需要设置一个标签的最小高度是200px，需要进行的设置为{min-height:200pxheight:auto !importtantheight:200pxoverflow:visible}
如何让edge浏览器兼容ie内核 ie浏览器兼容模式怎么设置在哪里