前端界面兼容性问题和解决办法
今天的兼容性问题主要发生在“前端三毒”身上，它们分别是：javascript
- IE 6
- IE 7
- IE 8
2.问题一：宽度计算问题
案例代码：css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 400px; } .left{ width: 200px; background: red; height: 300px; float: left; } .right{ width: 200px; float: right; } .div{ width: 180px; height: 180px; padding: 15px; background: blue; } </style> </head> <body> <div id="box"> <div class="left"></div> <div class="right"> <div class="div"></div> </div> </div> </body> </html>
上面的这段代码在标准浏览器中的显示状况以下：html
而在 IE 低版本浏览器中是一个什么样子呢？前端
我勒个去，什么状况？java
这实际上是由于，在 IE 6 下，子级的宽度会撑开父级设置好的宽度。浏览器
而解决方法也很是简单，将 **子级元素的宽度设置为小于等于父级元素的宽度 **就能够了。工具
除此以外，也推荐你们在盒模型的计算必定要准确，不然在 IE 下回出现问题。ui
3. 浮动时的兼容性问题（一）
在前端兼容性中，浮动这里也是兼容性的一个重灾区，例以下面的示例代码。url
案例代码：spa
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 400px; } .left{ background: red; float: left; } .right{ background: blue; float: right; } h3{ margin: 0; height: 40px; } </style> </head> <body> <div id="box"> <div class="left"> <h3>左侧</h3> </div> <div class="right"> <h3>右侧</h3> </div> </div> </body> </html>
在标准浏览器中没有任何问题。
而在低版本浏览器中是什么样子呢？
这又是由于什么呢？
在 IE 6 中，元素浮动中，若是元素须要宽度进行撑开，须要给里面的块元素都添加浮动才能够。
那么解决方案也很是简单，咱们只须要给他们的内容也进行浮动就能够。
4. 浮动时的兼容性问题（二）
除了上面的问题，咱们再来看一个问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .left{ width: 100px; height: 100px; background: red; float: left; } .right{ width: 200px; height: 100px; background: blue; margin-left: 100px; } </style> </head> <body> <div id="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
标准浏览器中：
妥妥的没任何问题，可是当在 IE 低版本中运行呢？
发现了么？中间多出来了一个间隙（3px）。
这是由于，在 IE 6/7 下，元素要经过浮动排在同一排，就须要给这行元素都加浮动。
因此咱们怎么办？
该怎么实现仍是要怎么实现，别想着偷懒。
5.IE 低版本中的最小高度问题
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ height: 2px; background: red; } </style> </head> <body> <div></div> </body> </html>
标准浏览器中显示正常：
而在 IE 6 下，你会发现一个问题。
WTF? 我明明设置的是 2px ，为何出来这么粗一根？
这实际上是由于，在 IE 6 下元素的高度若是小于 19px 的时候，会被当作 19px 处理。
那么咱们怎么解决？
其实很是简单，直接经过 overflow: hidden; 就能够解决。
6. IE 中的边框
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; border: 1px dotted red; } </style> </head> <body> <div></div> </body> </html>
在标准浏览器中：
而 IE 6 下是一个什么样子呢？？
惊了，这是怎么回事？
要知道，在 IE 6 下不支持 1px 的 dotted 边框样式。
那假如美工大爷非要用这个样式呢？
咱们其实能够经过背景平铺去解决，这里就不去演示了，你们确定都会，对吧。
7. margin 的问题
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ background: red; border: 1px solid red; zoom:1; } .div{ width: 100px; height: 100px; background: blue; margin: 100px; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
你们都知道，子级的第一个元素的 margin-top 会直接传递给父级，对吧。
而咱们其实也能够经过 设置一个 border 去解决这个问题。
这时候在上面的 margin 就能够生效了。
可是，问题来了，你猜在 IE 低版本中是什么样子呢？
缘由：在 IE 下，父级有边框的时候，子级的 margin 会失效。
为何会出现这种状况呢？
这实际上是在 IE 6/7/8 中才存在的一个属性，hasLayout。
在 IE 下的大部分兼容性问题都是由于 hasLayout 属性触发的问题，尽可能触发 hasLayout 能够减小 IE 的问题。
至于触发 hasLayout 的方法有很是多，但比较经常使用的就是 zoom: 1;，有兴趣的小伙伴能够本身尝试一下。
8.IE 中双边距的 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; } .box{ width: 200px; height: 200px; background: red; float: left; margin: 100px; } </style> </head> <body> <div class="box"></div> </body> </html>
上述这段代码，在标准浏览器中，呈现的模样：
而在低版本浏览器中，呈现的样式则彻底不一样。
这个也就是 IE 6 下很是著名的 双倍边距 BUG。
这个 BUG 的出现原理是，在 IE 6 下，块元素有浮动而且横向的时候有 margin 的时候，横向的 margin 会扩大两倍。
那知道缘由以后，解决起来也就很是简单了。
既然块元素会出现这个问题，那咱们就将其转换为内联元素。
这样就不会产生这个问题了。
9.margin 的 双边距效果
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ border: 10px solid red; float: left; } .box div{ width: 100px; height: 100px; background: red; margin-left: 30px; border: 5px solid #000; float: left; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
这段代码若是放在标准浏览器中，显示的妥妥的没问题。
可是若是放在低版本浏览器中是个什么样子呢？？
你会发现，margin-left 一行中最左侧的第一个元素有双边距，而若是换成margin-right 的话，margin-right 一行中最右侧的第一个元素有双边距。
这个问题的解决方案和上面的那个案例相同，咱们能够直接将其转换成 内联元素，这样的话，这个问题就能够直接解决了。
10.li 的浮动间隙问题
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{ margin:0; padding: 0; list-style: none; width: 300px; } li{ list-style: none; height: 30px; border: 1px solid #000; } a{ width: 100px; height: 30px; float: left; background: red; } span{ width: 100px; height: 30px; float: right; background: blue; } </style> </head> <body> <ul> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> </ul> </body> </html>
上面的代码在标准浏览器中是怎么显示的呢？
和我们预料的是相同的，对吧。
可是，大家猜猜在 IE 6 和 IE 7 中是怎么显示的呢？？
在 IE 6/7 下，li 自己没有浮动，li 里面的内容有浮动，li 下会产生一个间隙。
那么这个问题该如何解决呢?
这里给你们推荐两个解决方案。
- 给 li 也添加浮动
- 给 li 添加 vertical-align
先来看看给 li 添加浮动的作法。
可是注意一个问题，这样在 IE 下确实可以解决这个问题，可是相应的，在标准浏览器中，中间的白色块会消失。
因此，咱们推荐使用第二种作法，就是去添加 vertical-align。
你们还记得我在以前写的一篇文章，专门说 img 标签在下面有一条白色间隙的文章么？
这个问题的解决方案一样也是须要修改 vertical-align 的 属性，将默认的 baseline 修改成其余内容。
11. 当最小高度和 li 问题一块儿发生的时候
基于上面的 li 问题，若是咱们同时触发最小高度和 li 的问题的时候，该怎么办呢？
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{ margin:0; padding: 0; list-style: none; width: 300px; } li{ list-style: none; height: 12px; border: 1px solid #000; } a{ width: 100px; height: 12px; float: left; background: red; } span{ width: 100px; height: 12px; float: right; background: blue; } </style> </head> <body> <ul> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> </ul> </body> </html>
标准浏览器中的样式：
而在低版本浏览器中呢？
这时候确定有不少小伙伴开始动脑筋了，既然两个问题在一块儿，那我就直接将两个问题的解决代码一块儿加上呗。
这时候，你会发现，最小高度的问题确实解决了，可是间隙仍是存在呀？
这时候就是我要给你们提示的一个问题，在 IE 6 下，最小高度的 BUG 和 li 的间隙问题共存的时候，使用 vertical-align 是无效的。
咱们必需要使用 float : left;。
12.前端三毒中最恐怖的一毒
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ border: 10px solid red; } .box div{ width: 100px; height: 100px; background: blue; border: 5px solid #000; margin: 20px; float: left; display: inline; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
鉴于这个问题很是“恐怖”，咱们一点点的来分析。
首先我们先来看看，初始状态如今是什么样子？
标准浏览器：
IE 低版本：
并且，咱们发现不只仅在下方的 margin 失效了，而且发如今前面还存在一个双边距的现象。
那咱们怎么办呢？
咱们能够去添加一个宽度。
这时候在 IE 浏览器下显示正常了。
可是相对的，在标准浏览器中会失效。
这时候怎么办呢？
咱们能够去添加一个 overflow。
这时候，显示确实正常了。
注意：前方高能！！！
当咱们将宽度一像素，一像素的增长的时候。
当你增长到 3px 的时候（做者这里增长到 5px 才触发这个现象，应该是模拟器不许确），会忽然发现，底部的 margin 又失效了。
并且还存在另一个很是诡异的现象。
咱们首先将刚才的代码作一下修改。
这时候显示是正常的。
可是当咱们注释某一个 div 的时候（删除也能够），刚才的现象又发生了。
（做者这里注释了两个，为你们演示一下，注释一个也是相同的。）
实际上，这实际上是由于当一行子级元素宽度之和和父级的宽度相差超过 3px，或者 子级元素不满行的状况时，最后一行的子级元素的 margin-bottom 会失效。
这个问题无法解决，只可以避免。
这点必定要注意。
13.文字溢出 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 400px; } .left{ float: left; } .right{ float: right; width: 400px; } </style> </head> <body> <div class="box"> <div class="left"></div> <span></span> <div class="right">李先生真帅</div> </div> </body> </html>
这个 BUG 是怎么回事呢？
运行上面的代码，在正常浏览器内显示没有任何问题。
可是须要注意，若是在 IE 6里面，你会发现一个奇怪的现象。
咱们下面怎么多了一个“帅”字呀？
若是你在下面多加一个 span 标签呢？
两个 span：
三个 span：
四个 span：
咱们会发现，甚至于咱们的第一行文字直接所有消失了。
这个就是 IE 6 下的文字溢出 BUG.
子元素的宽度和父级的宽度若是相差小于 3px 的时候，两个浮动元素中间有注释或者内联元素的时候，就会出现文字溢出，内联元素越多，溢出越多.
并且，若是中间存在注释，也会触发 BUG.
既然咱们将问题提了出来，那就确定有解决的办法。
咱们推荐，用 块元素标签 把注释或者内联元素包裹起来。
这样就能够有效的避免触发这个 BUG 了。
14.绝对定位失效 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid #000; position: relative; } a{ position: absolute; width: 40px; height: 40px; background: red; right: 20px; top: 20px; } ul{ width: 150px; height: 150px; background: yellow; margin: 0 0 0 50px; padding: 0; float: left; display: inline; } </style> </head> <body> <div class="box"> <ul></ul> <a href="javascript:void(0)"></a> </div> </body> </html>
上面的案例代码，在标准浏览器中显示彻底没有问题。
可是当咱们在低版本浏览器中，显示就会出现问题了。
这个问题的触发缘由：
在 IE 6 下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效。
那咱们该怎么解决呢？
很是简单，不让浮动元素和绝对定位是兄弟关系就能够咯。
咱们能够用 div 标签嵌套一下，这样分隔开来就不会触发刚才的问题了。
15.滑动元素 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid #000; overflow: auto; } .div{ width: 150px; height: 300px; background: red; position: relative; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
这时候咱们在标准浏览器中查看一下。
不论是滑动仍是其余方式都没问题，可是，IE 下就没问题了么？
哼哼，前端三毒，名不虚传。
问题缘由在这：在 IE 6/7 下，子级元素有相对定位，父级 overflow 包不住子级元素。
那咱们该怎么处理这个问题？
既然子元素有相对定位，那咱们就给父元素一样给出相对定位呗。
这样就能轻松解决掉这个问题了。
16.像素误差 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 201px; height: 201px; border: 1px solid #000; position: relative; } .box span{ width: 20px; height: 20px; background: yellow; position: absolute; right: -1px; bottom: -1px; } </style> </head> <body> <div class="box"> <span></span> </div> </body> </html>
上面的代码，在 标准浏览器中能够正常显示。
可是若是放在 IE 中显示呢？
这个问题的缘由：
在 IE 6 下，若是绝对定位的父级宽和高是奇数的时候，子级元素的 right 和 bottom 会有1像素的误差。
至于解决方案，很差意思，没有。
这个东西只能去尽可能避免，若是没办法，只能这么作，那你就要和美工大爷提早商量好了，要么你改，要我我弄完你别找个人事。（我之前就这么干的，羞涩...）
17.固定定位 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ height: 2000px; background: red; } .box{ width: 200px; height: 200px; background: yellow; position: fixed; top: 30px; left: 100px; } </style> </head> <body> <div class="box"></div> </body> </html>
咱们在标准浏览器中，显示是正常的。
而在 IE 浏览器中，你会发现，我们设置的 固定定位失效了！
这实际上是由于，在 IE 6 中不存在固定定位，只存在绝对定位。
那咱们该怎么作呢？
在 IE 低版本下，咱们只能经过 JS 去模拟这个效果。
18.透明度失效
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ height: 2000px; background: red; } .box{ width: 200px; height: 200px; background: yellow; position: fixed; top: 30px; left: 100px; opacity: 0.5; } </style> </head> <body> <div class="box"></div> </body> </html>
咱们在应用了定位以后，常常会用到 opacity这个属性，在标准浏览器中，显示是没有任何问题的。
可是若是在 IE 中去查看呢？
你会发现，个人透明度失效了！
这实际上是由于，在 IE 中实际上是不认识 opacity 这个属性的。
那咱们若是想要在 IE 中使用透明度，该怎么作呢？
咱们能够这么用。
这样咱们的透明度就均可以正常使用了。
19.input 元素的 BUG
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 32px; border: 1px solid #000; } input{ width: 100px; height: 30px; border: 1px solid red; margin: 0; padding: 0; } </style> </head> <body> <div class="box"> <input type="text" name=""> </div> </body> </html>
在标准浏览器中显示是没有什么异常的。
可是，在 IE 6 和 IE 7 中，输入型表单控件上下会有 1px 的间隙。
那咱们怎么去解决呢？
咱们其实能够经过设置浮动就能解决。
20. IE 中不支持 png 图片的问题
咱们在平时的开发中，不免会遇到各类各样的图片，不少时候都是咱们的美工大爷给咱们提早切好的，可是咱们偶尔仍是须要本身弄一些图片。
那在处理图片以后，你们通常使用的图片格式都是什么呢？
他们之间有哪些区别呢？咱们今天首先来看一下。
这里我首先经过 PS 去制做了一张图片，具体的图片制做方式在此不作更多说明。
重点在图片的导出的时候，咱们在导出时，不一样的图片格式都有什么差异呢？
首先咱们先来看看 GIF 的导出。
咱们会发现，图片要么是直接透明的，要么是不透明的，不存在渐变这个效果。
而 JPEG 呢？
彻底没有透明效果。
而 咱们经常使用的 PNG 格式呢？
这里首先来看看 PNG-8
和 GIF 很是相似,可是大小要小不少。
最后咱们再来看看 PNG-24.
咱们会发现，咱们图片的大小略大，可是透明效果所有存在。
明白了上面各类图片的特性以后，咱们再来看看下面的案例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background: #000; } .box{ width: 400px; height: 400px; background: url("1.png"); } </style> </head> <body> <div class="box"></div> </body> </html>
在标准浏览器中，显示彻底没有问题。
那么接下来一块儿再来看看 IE 中的显示。
发现了么？
咱们的透明效果彻底失效了，咱们使用的但是 PNG-24 呀。
这是为何呢？
这实际上是由于，在IE 6 下，不支持透明度的方式。
那咱们怎么去处理这个问题呢？
咱们其实能够经过一个 JS 文件来处理它。
处理工具：DD_belatedPNG
使用起来其实也很是简单。
这样在 IE 6下，咱们的 PNG 图片也能够正常显示啦。
21.条件注释语句
接下来给你们介绍一个小套路，就是条件注释语句，这个是咱们日常处理兼容时很经常使用的一个小技巧。
使用方式也很是简单。
注意，这里的书写方式是固定的，不可以更改。
那咱们写这个有什么效果呢？
咱们会发现，在标准浏览器中咱们是看不见任何东西的。
可是在特定的 IE 版本中，咱们能够看到注释之间的文字。
甚至咱们也能够在苹果官网中看到这样的处理方法。
22.CSS HACK
最后再给你们介绍一个差很少算是“走火入魔”的处理方法。
就是咱们其实能够根据不一样的 IE 浏览器版本去执行特定的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* CSS HACK */ .box{ width: 100px; height: 100px; background: red; background: yellow\9; +background: black; _background:pink; /* \9 ： IE 10 以前的浏览器解析的代码 + 或者 * ： IE 7（包括 7）以前的 IE 浏览器 _ ： IE 6（包括 6）以前的 IE 浏览器 */ } </style> </head> <body> <div class="box"></div> </body> </html>
咱们能够看到，若是我当前的版本是 IE 7，我能够在 background 前面跟上一个 “+”。
这样在 IE 7 以及以前的版本里，就能识别对应的这段代码了。
IE 7 浏览器：
网址：https://www.jianshu.com/p/25ffda51e9a8
- 1. 前端浏览器兼容性问题和解决办法
- 2. 前端兼容性问题
- 3. 前端浏览器兼容问题及解决办法
- 4. 移动端常见兼容性问题及解决办法
- 5. 前端兼容性及解决方法
- 6. 前端常见兼容性问题及其解决方法
- 7. 前端PC端兼容性问题
- 8. H5兼容性问题解决方法
- 9. 前端兼容性问题总结
- 10. web前端兼容性问题(即更)
- 更多相关文章...
- • Redis悲观锁解决高并发抢红包的问题 - 红包项目实战
- • Redis乐观锁解决高并发抢红包的问题 - 红包项目实战
- • PHP Ajax 跨域问题最佳解决方案
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端浏览器兼容性问题和解决办法
- 2. 前端兼容性问题
- 3. 前端浏览器兼容问题及解决办法
- 4. 移动端常见兼容性问题及解决办法
- 5. 前端兼容性及解决方法
- 6. 前端常见兼容性问题及其解决方法
- 7. 前端PC端兼容性问题
- 8. H5兼容性问题解决方法
- 9. 前端兼容性问题总结
- 10. web前端兼容性问题(即更)