写在开头最近关于微软的一则新闻吸引了我，据报道：微软于5月19日宣布，从明年6月15日起，IE浏览器将被基本淘汰，标志着又一款数码产品将退出IE浏览器的历史。InternetExplorer（简称：IE）是微软公司推出的一款网络浏览器。最初称为MicrosoftInternetExplorer（版本6之前）和WindowsInternetExplorer（版本7、8、9、10、11）。在IE7之前，中文直译为“互联网探路者”，IE7之后，为了方便起见，正式称为“IE浏览器”。2015年3月，微软确认将放弃IE品牌。相反，在Windows10上，MicrosoftEdge取代了InternetExplorer。2016年1月12日，微软公司宣布，即日起停止对InternetExplorer8/9/10三个版本的技术支持，用户将不再收到微软官方的任何IE安全更新；作为替代方案，微软建议用户升级到IE11或切换到MicrosoftEdge浏览器。据2020年8月18日消息，微软服务将告别其古老的IE浏览器，并于2021年8月17日停止IE11对Microsoft365应用程序的支持。微软也将于2021年3月9日结束对其旧版Edge浏览器的支持。IE为什么这么强1.国内很多老的大的项目前几年对兼容性的要求很高。许多前端项目仍然喜忧参半。它们是使用JQuery等库开发的。有的项目，重构的投入与回报不成正比（老大说：反正我能用。。。等等），有可能外包写，写完跑路。2、不思进取，很多管理人员不在乎技术长期停滞不前，尤其是一些旱涝灾害性质的部门，使用客户只用的IE浏览器。这种装腔作势，能糊弄好几年。3、客户自身存在问题，缺乏教育。IE一定比GoogleChrome更安全吗？这里打个问号，不过IE比较封闭，很多API和权限接口都没有那么开放。开发效率和最终产品实施效果都会降低，性能也会很差。4.敏感客户，比如军方、国防等敏感部门，不敢在电脑上安装其他软件，只敢用内置浏览器IE，那么这次就彻底解决了，用内置的MicrosoftEdge.IE算N罪，随便百度一篇，几十篇就出来了，例如：1.CSS常见问题1.H5标签兼容 解决方法：2。元素浮动后，如果可以设置宽度，给元素加上宽度。如果需要宽度，就是content支持的，如果开启了，给里面的块元素加上floatingfloat:left；3、第一个元素浮动，第二个元素的margin-left值等于第一个元素的宽度。IE6下会出现gap问题 解决方法：不要用margin-left，两个元素都加上浮动的float:left；4.在IE6中，子元素超过父元素的宽高，会拉伸父元素的宽高，比如放置轮播的ul宽度会超过父元素 解决方法：做不要让子元素的宽高超过父级5.P包含块元素嵌套规则 记住规则：p,h标签不能嵌套块元素2.CSS兼容性问题1.margin兼容性问题 1）margin-top传递，子元素的上下边距会传递给父元素 预防：触发BFC（如overflow:hidden；保存标准浏览器和IE78），触发IEhaslayoutzoom:1（到保存IE67); 2）上下边距重叠（触发条件：同层元素，第一个元素的底部和第二个元素的顶部会重叠在一起） 解决办法：两个元素分别设置margin，然后尝试使用相同方向的边距，例如margin-top2、display:inline-block； 块元素变成内联块，不兼容IE67；inlineelements变成inlineblocks，所有浏览器都支持 *显示：内联；*zoom:1;} 发现问题：当然，改成内联块后，有个特点就是如果元素换行的时候，页面上元素之间会有空隙，空隙的大小为空间的像素大小。3、IE6元素最小高度为19px 解决方法：overflow:hidden；4.IE67doublemargin，当元素浮动的时候，再设置margin，就会出现doublemargin 解决方法：对于IE67，添加*display:inline;样式，比如页面上横向排列的几组块，经常会遇到5和li浮动的元素，在IE67下会出现4px的空隙问题 解决：对于IE67，添加*vertical-align:top;Style6和IE6，如果两个浮动元素之间有注释或者内联元素，并且与父元素的宽度差不超过3px，会导致一些文字被复制的问题 解决方法：1）两个避免使用内联元素或者注释 浮动元素之间 解决方法：对于IE67，加上position:relativetoparentelement；8、在IE6下，绝对定位元素的parent的宽高都是奇数，绝对定位元素的right和bottom值会有1px的偏差 解决方法：避免奇数个父级宽度。9、绝对定位元素和浮动元素在IE6下是并列的。绝对定位的元素消失了。如果他们两个不在同一级别，则可以避免此错误。10.IE6下的inputgap 解决办法：对于IE67，在input元素上加上*float:left；11、IE6下输入型表单控件的背景问题，背景不固定，滚动 解决办法：setbackground-attachment:fixed;12、line-height 在IE67和FF下不兼容，会有几个像素点的偏差，视觉上只有IE8等标准浏览器正常，在IE6 下无法设置line-height为了图片实现垂直居中的效果，所以给img标签单独设置{float:left;postion:relative;top:...} ，文字的line-height还是可以识别的13.常见文章列表布局：标题+发布日期
- 这里是文章列表标题，我是奇葩的IE浏览器
- 这里是文章列表标题2，我是奇葩的IE浏览器