常见浏览器兼容性问题及解决办法总结

不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同；

解决办法：在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0即可。

在IE6中，块元素设置float并且有水平方向的margin时，margin显示出来会比设置的值大，会导致最后一块元素被顶到下面去；

解决办法：可以将块级元素display设置为inline。

在IE6，IE7等浏览器，标签高度小于10px时，实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度；

解决办法：设置{overflow: hidden;}，或者设置line-height小于你设置的高度。

在某些浏览器中，图片有默认的间距(所有有文字属性的标签都会有边距，除非两个标签连在一起没有隔开)；

解决办法：使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距；此外可以让HTML的img标签紧挨在一起，不要隔开，但是会影响HTML文档的结构，不太美观。

标签最低高度设置min-height不兼容问题；

解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}。

IE9以下浏览器不能使用opacity；

解决办法：{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

7.两个块级元素，父元素设置了overflow:auto，子元素设置了position:relative ，且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决办法：父级元素设置position:relative。

   浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

产生的原因

造成浏览器兼容性问题的根本原因就是各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

怎么理解上述文字？即：不同浏览器使用的内核及所支持的HTML等网页语言标准不同，以及用户客户端的环境不同（如分辨率不同）造成了显示效果不能达到理想效果。

解决方法

前端开发经常需要检查浏览器的兼容性，这里推荐(Can I Use)这个查询网站。它是一个针对前端开发人员定制的一个查询CSS、JS、HTML5、SVG在主流浏览器中特性和兼容性的网站，可以很好的保证网页在浏览器中的兼容性。有了这个工具我们就可以快速的了解到代码在各个浏览器中的兼容情况了，强烈推荐一波

常见浏览器兼容性问题及解决办法总结相关推荐

前端常见浏览器兼容性问题及解决办法
不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异. 1.不同浏览器的标签默认的外补丁和内补丁不同 *{ margin:0; padding:0; } 2. 块属性标签float后, ...
IE浏览器常见CSS兼容性问题及解决办法
IE浏览器常见CSS兼容性问题及解决办法参考文章: (1)IE浏览器常见CSS兼容性问题及解决办法 (2)https://www.cnblogs.com/kiscall/p/4679616.html ...
常见浏览器兼容性问题与解决方式
所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的 ...
移动端常见兼容性问题及解决办法
移动端常见兼容性问题及解决办法参考文章: (1)移动端常见兼容性问题及解决办法 (2)https://www.cnblogs.com/crazycode2/p/6624742.html 备忘一下.
常见浏览器兼容性问题大全
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
win10小课堂：常见电脑蓝屏的解决办法
win10小课堂:常见电脑蓝屏的解决办法 MACHINE-CHECK-EXCEPTION 0X0000007E.0X0000008E 0X000000D1 0x0000001A 0x0000007B ...
【Python3爬虫】常见反爬虫措施及解决办法（二）...
[Python3爬虫]常见反爬虫措施及解决办法(二) 这一篇博客,还是接着说那些常见的反爬虫措施以及我们的解决办法.同样的,如果对你有帮助的话,麻烦点一下推荐啦. 一.防盗链这次我遇到的防盗链,除了 ...
关于浏览器兼容问题的解决办法，全部都在这里了
关于浏览器兼容问题的解决办法,全部都在这里了参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...
常见浏览器兼容性问题及解决方案
常见浏览器兼容性问题及解决方案: 1.不同浏览器的默认内外边距和内外补丁不同. 解决方案:css设置 *{margin:0; padding:0;} *是通配符,匹配所有html标签. 2.块级元素f ...

常见浏览器兼容性问题及解决办法总结

常见浏览器兼容性问题及解决办法总结相关推荐

最新文章

热门文章