PC端跨浏览器兼容性问题

最新推荐文章于 2024-03-24 16:32:41 发布

rainmaxfeng

最新推荐文章于 2024-03-24 16:32:41 发布

阅读量532

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/rainmaxfeng/article/details/99070188

版权

本文探讨了PC端浏览器的兼容性问题，包括浏览器特性支持、需要兼容的浏览器版本、解决不支持特性的方法，以及如何针对不同浏览器实现布局。介绍了CSS2和CSS3选择器的兼容性问题，如IE6-7的支持情况，并提供了相应的解决策略，如使用条件注释、hack技巧和polyfill。此外，还讨论了浏览器的bug及其修复方法。

摘要由CSDN通过智能技术生成

兼容性问题分为两方面，一是浏览器对该特性不支持，二是某些特定条件下触发浏览器BUG。

浏览器特性支持

几个可以查看浏览器支持css特性的网址

caniuse.com
codrops CSS Reference

需要兼容哪些浏览器

根据用户群体决定
- 面向普通用户：IE8+、Chrome、Firefox
- 企业级产品：IE9+、Chrome、Firefox
了解浏览器所占的市场份额
- 百度统计、NetMarketShare

浏览器不支持时怎么办

低版本没有这个特性时，表现是否可以接受？
- border-radius: 不支持时，没有圆角，是否还看的过去？
- box-shadows：不支持时，没有阴影，丑不丑？
可以使用效果差一点的替代方案么？
- min-height:100vh, 替代成800px
可以使用一些替代方案么？
- opacity: 0.5，在IE下使用：filter: alpha(opacity=50)
纯css没法子了，用javascript方式让浏览器支持？
- 使用html5shim.js让IE6-8支持新标签
- 使用DD_belatedPNG.js让IE6支持半透明png图片
最差情况，跟换实现方案。

让不同浏览器实现不同的布局

@supports

在css3可以使用这个来查询浏览器是否支持某个特性，但是因为@supperts自身在浏览器的兼容性方面还是个问题，所以目前不适用，可能是未来的手段。

浏览器的hack

目前还是采用hack方式较多。

hack原理–层叠和忽略

对浏览器无效的属性会被忽略

p {
   
  display: table;
  display: flex; /*支持flex时，会覆盖table，不支持则使用table*/
}

hack原理–条件注释

<!--[if IE 7]>
  <p>只有在IE7中才能看到我</p>
<![endif]-->

<!--[if lt IE 8]>
  <p>只有在IE8以下才能看到我</p>
<![endif]-->

这是IE中独有的条件注释，只能IE才能识别。可以如下应用：

  <!--[if lt IE 7]><html class="ie6"><![endif]-->
  <!--[if IE 7]><html class="ie7"><![endif]-->
  <!--[if IE 8]><html cl

最低0.47元/天解锁文章

rainmaxfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端跨浏览器兼容性问题

兼容性问题分为两方面，一是浏览器对该特性不支持，二是某些特定条件下触发浏览器BUG。浏览器特性支持几个可以查看浏览器支持css特性的网址caniuse.comcodrops CSS Reference需要兼容哪些浏览器根据用户群体决定面向普通用户：IE8+、Chrome、Firefox企业级产品：IE9+、Chrome、Firefox了解浏览器所占的市场份...
复制链接

扫一扫