创新路
我们一直在努力

flexbox响应式布局时,向下兼容IE的解决方案

要实现响应式布局,采用flexbox弹性盒子布局的解决方案是非常高效实用的,现在连大名鼎鼎的Bootstrap框架也支持flexbox了,我们有什么理由不使用它呢?

浏览器兼容性问题是老生常谈了,目前只有IE10以上版本才能较好的支持flexbox,IE9/8/7完全不支持。这个就比较尴尬了,由于是完全不支持的情况,在低版本IE中看flexbox布局的网页,将是个灾难,页面完全错乱的,怎么解决这个问题了?

这里,就需要提到CSS hack这个概念了。

什么是CSS hack?

由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

CSS hack种类多种多样,这里我们用条件注释判断浏览器的方法

<!–[if ! IE 10]>

本段文字只在IE10以下的浏览器中显示

<![endif]–>

上面的代码,大家可以自行测试一下

有了这个思路,接下来就简单多了。我们只需要将IE专用的CSS代码单独写进一个CSS里面,命名为style_ie.css,那么我们的调用代码就是

<!–[if ! IE 10]>

<link type="text/css" rel="stylesheet" href="css/style_ie.css" />

<![endif]–>

flexbox.jpg

现在各种新浏览器,手机浏览器中都能访问响应式网站了。在IE9/8/7中响应式就不需要了,你可以按照之前的老方法写CSS代码,推荐使用float布局,它完全可以沿用flexbox的框架结构,只是实现的代码不同而已。

未经允许不得转载:天府数据港官方信息博客 » flexbox响应式布局时,向下兼容IE的解决方案

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机