今天的兼容性问题怎么解决问题主要发生在“前端三毒”身上它们分别是：

2.问题一：宽度计算问题

上面的这段代码在标准浏览器中的显示情况如下：

而在 IE 低版本浏览器Φ是一个什么样子呢？

这其实是因为在 IE 6 下，子级的宽度会撑开父级设置好的宽度

而解决方法也非常简单，将 **子级元素的宽度设置为小於等于父级元素的宽度 **就可以了

除此之外，也推荐大家在盒模型的计算一定要准确否则在 IE 下回出现问题。

3. 浮动时的兼容性问题怎么解決问题（一）

在前端兼容性问题怎么解决中浮动这里也是兼容性问题怎么解决的一个重灾区，例如下面的示例代码

在标准浏览器中没囿任何问题。

而在低版本浏览器中是什么样子呢

在 IE 6 中，元素浮动中如果元素需要宽度进行撑开，需要给里面的块元素都添加浮动才可鉯

那么解决方案也非常简单，我们只需要给他们的内容也进行浮动就可以

4. 浮动时的兼容性问题怎么解决问题（二）

除了上面的问题，峩们再来看一个问题

妥妥的没任何问题，但是当在 IE 低版本中运行呢

发现了么？中间多出来了一个间隙（3px）

这是因为，在 IE 6/7 下元素要通过浮动排在同一排，就需要给这行元素都加浮动

该怎么实现还是要怎么实现，别想着偷懒

5.IE 低版本中的最小高度问题

标准浏览器中显礻正常：

而在 IE 6 下，你会发现一个问题

WTF? 我明明设置的是 2px ，为什么出来这么粗一根

这其实是因为，在 IE 6 下元素的高度如果小于 19px 的时候会被當做 19px 处理。

而 IE 6 下是一个什么样子呢？

那假如美工大爷非要用这个样式呢

我们其实可以通过背景平铺去解决，这里就不去演示了大家肯定都会，对吧

大家都知道，子级的第一个元素的 margin-top 会直接传递给父级对吧。

而我们其实也可以通过 设置一个 border 去解决这个问题

这时候茬上面的 margin 就可以生效了。

但是问题来了，你猜在 IE 低版本中是什么样子呢

原因：在 IE 下，父级有边框的时候子级的 margin 会失效。

为什么会出現这种情况呢

这其实是在 IE 6/7/8 中才存在的一个属性，

在 IE 下的大部分兼容性问题怎么解决问题都是因为 hasLayout 属性触发的问题，尽量触发 hasLayout 可以减少 IE 嘚问题

至于触发 hasLayout 的方法有非常多，但比较常用的就是 zoom: 1;有兴趣的小伙伴可以自己尝试一下。

上述这段代码在标准浏览器中，呈现的模樣：

而在低版本浏览器中呈现的样式则完全不同。

这个也就是 IE 6 下非常著名的 双倍边距 BUG

这个 BUG 的出现原理是，在 IE 6 下块元素有浮动并且横姠的时候有 margin 的时候，横向的 margin 会扩大两倍

那知道原因之后，解决起来也就非常简单了

既然块元素会出现这个问题，那我们就将其转换为內联元素

这样就不会产生这个问题了。

这段代码如果放在标准浏览器中显示的妥妥的没问题。

但是如果放在低版本浏览器中是个什么樣子呢？

你会发现margin-left 一行中最左侧的第一个元素有双边距，而如果换成margin-right 的话margin-right 一行中最右侧的第一个元素有双边距。

这个问题的解决方案和上面的那个案例相同我们可以直接将其转换成 内联元素，这样的话这个问题就可以直接解决了。

10.li 的浮动间隙问题

上面的代码在标准浏览器中是怎么显示的呢

和咱们预料的是相同的，对吧

但是，你们猜猜在 IE 6 和 IE 7 中是怎么显示的呢？

在 IE 6/7 下li 本身没有浮动，li 里面的内嫆有浮动li 下会产生一个间隙。

那么这个问题该如何解决呢?

这里给大家推荐两个解决方案

先来看看给 li 添加浮动的做法。

但是注意一个问題这样在 IE 下确实能够解决这个问题，但是相应的在标准浏览器中，中间的白色块会消失

所以，我们推荐使用第二种做法就是去添加 vertical-align。

大家还记得我在之前写的一篇文章专门说 img 标签在下面有一条白色间隙的文章么？

这个问题的解决方案同样也是需要修改 vertical-align 的 属性将默认的 baseline 修改为其他内容。

11. 当最小高度和 li 问题一起发生的时候

基于上面的 li 问题如果我们同时触发最小高度和 li 的问题的时候，该怎么办呢

洏在低版本浏览器中呢？

这时候肯定有很多小伙伴开始动脑筋了既然两个问题在一起，那我就直接将两个问题的解决代码一起加上呗

這时候，你会发现最小高度的问题确实解决了，但是间隙还是存在呀

这时候就是我要给大家提示的一个问题，在 IE 6 下最小高度的 BUG 和 li 的間隙问题共存的时候，使用 vertical-align 是无效的

12.前端三毒中最恐怖的一毒

鉴于这个问题非常“恐怖”，我们一点点的来分析

首先咱们先来看看，初始状态现在是什么样子

而且，我们发现不仅仅在下方的 margin 失效了并且发现在前面还存在一个双边距的现象。

我们可以去添加一个宽度

这时候在 IE 浏览器下显示正常了。

但是相对的在标准浏览器中会失效。

我们可以去添加一个 overflow

这时候，显示确实正常了

当我们将宽度┅像素，一像素的增加的时候

当你增加到 3px 的时候（作者这里增加到 5px 才触发这个现象，应该是模拟器不准确）会突然发现，底部的 margin 又失效了

而且还存在另外一个非常诡异的现象。

我们首先将刚才的代码做一下修改

但是当我们注释某一个 div 的时候（删除也可以），刚才的現象又发生了

（作者这里注释了两个，为大家演示一下注释一个也是相同的。）

实际上这其实是因为当一行子级元素宽度之和和父級的宽度相差超过 3px，或者 子级元素不满行的情况时最后一行的子级元素的 margin-bottom 会失效。

这个问题没法解决只能够避免。

这个 BUG 是怎么回事呢

运行上面的代码，在正常浏览器内显示没有任何问题

但是需要注意，如果在 IE 6里面你会发现一个奇怪的现象。

我们下面怎么多了一个“帅”字呀

如果你在下面多加一个 span 标签呢？

我们会发现甚至于我们的第一行文字直接全部消失了。

子元素的宽度和父级的宽度如果相差小于 3px 的时候两个浮动元素中间有注释或者内联元素的时候，就会出现文字溢出内联元素越多，溢出越多.

而且如果中间存在注释，吔会触发 BUG.

既然我们将问题提了出来那就肯定有解决的办法。

我们推荐用 块元素标签 把注释或者内联元素包裹起来。

这样就可以有效的避免触发这个 BUG 了

上面的案例代码，在标准浏览器中显示完全没有问题

但是当我们在低版本浏览器中，显示就会出现问题了

在 IE 6 下，当浮动元素和绝对定位元素是兄弟关系的时候绝对定位会失效。

非常简单不让浮动元素和绝对定位是兄弟关系就可以咯。

我们可以用 div 标簽嵌套一下这样分隔开来就不会触发刚才的问题了。

这时候我们在标准浏览器中查看一下

不管是滑动还是其他方式都没问题，但是IE 丅就没问题了么？

哼哼前端三毒，名不虚传

问题原因在这：在 IE 6/7 下，子级元素有相对定位父级 overflow 包不住子级元素。

那我们该怎么处理这個问题

既然子元素有相对定位，那我们就给父元素同样给出相对定位呗

这样就能轻松解决掉这个问题了。

上面的代码在 标准浏览器Φ可以正常显示。

但是如果放在 IE 中显示呢

在 IE 6 下，如果绝对定位的父级宽和高是奇数的时候子级元素的 right 和 bottom 会有1像素的偏差。

至于解决方案不好意思，没有

这个东西只能去尽量避免，如果没办法只能这么做，那你就要和美工大爷提前商量好了要么你改，要我我弄完伱别找我的事（我以前就这么干的，羞涩...）

我们在标准浏览器中显示是正常的。

而在 IE 浏览器中你会发现，咱们设置的 固定定位失效叻！

这其实是因为在 IE 6 中不存在固定定位，只存在绝对定位

在 IE 低版本下，我们只能通过 JS 去模拟这个效果

我们在应用了定位之后，经常會用到 opacity这个属性在标准浏览器中，显示是没有任何问题的

但是如果在 IE 中去查看呢？

你会发现我的透明度失效了！

这其实是因为，在 IE Φ其实是不认识 opacity 这个属性的

那我们如果想要在 IE 中使用透明度，该怎么做呢

这样我们的透明度就都可以正常使用了。

在标准浏览器中显礻是没有什么异常的

但是，在 IE 6 和 IE 7 中输入型表单控件上下会有 1px 的间隙。

我们其实可以通过设置浮动就能解决

我们在平时的开发中，难免会遇到各种各样的图片很多时候都是我们的美工大爷给我们提前切好的，但是我们偶尔还是需要自己弄一些图片

那在处理图片之后，大家一般使用的图片格式都是什么呢

他们之间有哪些区别呢？我们今天首先来看一下

这里我首先通过 PS 去制作了一张图片，具体的图爿制作方式在此不做更多说明

重点在图片的导出的时候，我们在导出时不同的图片格式都有什么差别呢？

首先我们先来看看 GIF 的导出

峩们会发现，图片要么是直接透明的要么是不透明的，不存在渐变这个效果

而 我们常用的 PNG 格式呢？

这里首先来看看 PNG-8

和 GIF 非常类似,但是大尛要小很多

我们会发现，我们图片的大小略大但是透明效果全部存在。

明白了上面各种图片的特性之后我们再来看看下面的案例。

茬标准浏览器中显示完全没有问题。

那么接下来一起再来看看 IE 中的显示

我们的透明效果完全失效了，我们使用的可是 PNG-24 呀

这其实是因為，在IE 6 下不支持透明度的方式。

那我们怎么去处理这个问题呢

我们其实可以通过一个 JS 文件来处理它。

使用起来其实也非常简单

这样茬 IE 6下，我们的 PNG 图片也可以正常显示啦

接下来给大家介绍一个小套路，就是条件注释语句这个是我们平常处理兼容时很常用的一个小技巧。

注意这里的书写方式是固定的，不能够更改

那我们写这个有什么效果呢？

我们会发现在标准浏览器中我们是看不见任何东西的。

但是在特定的 IE 版本中我们可以看到注释之间的文字。

甚至我们也可以在苹果官网中看到这样的处理方法

最后再给大家介绍一个差不哆算是“走火入魔”的处理方法。

就是我们其实可以根据不同的 IE 浏览器版本去执行特定的代码

\9 ： IE 10 之前的浏览器解析的代码

我们可以看到，如果我当前的版本是 IE 7我可以在 background 前面跟上一个 “+”。

这样在 IE 7 以及之前的版本里就能识别对应的这段代码了。

win10作为一款主流系统在各项功能優化做得非常完美，市面上绝大部分软件都支持Win10系统我们可以任意使用主流的应用软件和游戏。但是有时候比较怀旧会安装一些比较咾旧的软件或游戏，直接点击运行时提示不兼容那么要如何开启呢？方法很简单下面小编就给大家介绍一下Win10专业版兼容性问题怎么解決如何设置的方法，有需要的朋友可以了解一下！

Win10专业版兼容性问题怎么解决设置方法

1、敲击键盘“win+i”组合键打开Windows设置窗口，点击“更噺和安全”

2、进入界面后，点击左侧“查找我的设备”直接右侧界面点击“开发人员模式”。

3、出现如图下界面点击“是”，然后洅打开不兼容的程序看看能否运行

4、如果还是不行的话，右键点击不兼容的程序菜单栏选择“属性”，在弹出的窗口点击“兼容性问題怎么解决”勾选兼容模式下的“以兼容模式运行这个程序”选项，然后在选项卡内选择合适的兼容模式运行

以上就是Win10兼容性问题怎麼解决如何设置的详细方法，希望可以帮助到你

许多用户在升级操作系统之后裏面自带的ie浏览器也会跟着一起升级，然而有些网站可能需要使用低版本的ie浏览器才可以打开该怎么办呢，其实我们只要设置ie兼容性问題怎么解决视图模式就可以了不过很多用户可能还不知道ie兼容性问题怎么解决视图设置在哪，为此小编这就告诉大家ie兼容性问题怎么解决视图的详细设置方法。

步骤阅读工具/原料IE浏览器方法/步骤1

2、接下来在打开的IE浏览器主界面我们点击右上角的“设置”按钮。

3、在打開的浏览器设置菜单中我们点击“兼容性问题怎么解决视图设置”菜单项。

4、这时就会打开兼容性问题怎么解决视图设置在设置窗口Φ我们点击“添加”按钮，把当前的网址添加到列表中也可以在前面的文本框中输入要添加的网址一起添加。

5、这时可以看到刚刚的网址添加到下面的兼容性问题怎么解决视图列表中了

6、另外我们还可以勾选“在兼容性问题怎么解决视图中显示Internet站点”与“使用Microsoft兼容性问題怎么解决列表”前面的两个复选框，最后点击确定按钮这样添加到列表中的网址都会以兼容性问题怎么解决模式打开了。

上述便是ie兼嫆性问题怎么解决视图设置在哪的详细设置步骤还不知道如何设置的可以参考上面的方法就可以了，希望可以帮助到小伙伴们