关于flex布局的目前兼容性写法

flex虽然使用起来很方便,但是他的兼容性由于历史版本的原因,一直很让人头疼,低版本IE就不用说了,webkit目前也不是所有版本都能支持同一写法,测试半天之后写了个差不多的写法,至少pc端高版本ie,chrome,firefox,opera,新版搜狗高速模式以及兼容模式都正常支持。移动端的webkit,UC,firefox都正常支持,由于手上没有winphone,暂时没测试移动端的IE。

<!DOCTYPE html>

<html>

<head>

<title>demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<style type="text/css">

.box{

width: 75%;

height: 50px;

background: #eee;

border:#ccc 1px solid;

margin: 20px auto;

padding: 5px;

display: -webkit-box;

display: -moz-box;

display: -o-box;

display: -ms-flexbox;

display: flex;

}

.item{

border:#ccc 1px solid;

margin: 0 5px;

height: 48px;

-moz-box-flex: 1;

-webkit-box-flex: 1;

-o-box-flex: 1;

-ms-flex: 1;

flex: 1;

}

</style>

</head>

<body>

<div class="box">

<div class="item"></div>

<div class="item"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

Saiku_学习_01_saiku安装与运行

访问 localhost:8080/upload.html ,可以看到一个让你上传license的页面,如下图:

504
来自专栏北京马哥教育

马哥金牌分享 | Docker在云家政的应用

本文是由运维专家、马哥教育特约讲师Fighter分享的《Docker在云家政的应用》的文字整理版。 大家晚上好,我是Fighter,今晚由我给大家分享《Dock...

2917
来自专栏Thinks

Web App Install Banners简介

移动端,web和native app有一个比较大的区别:访问的过程。

681
来自专栏施炯的IoT开发专栏

Windows 10 IoT Core 17133 for Insider 版本更新

今天,微软发布了Windows 10 IoT Core 17133 for Insider 版本更新,本次更新只修正了一些Bug,没有发布新的特性。用户可以登录...

2387
来自专栏快乐八哥

JavaScript操作Cookie

在Web开发中,我们经常使用Cookie保存一些不是非常敏高的数据。比如“下次自动登录”,“广告显示”等功能。定义是:某些网站为了辨别用户身份而存储在用户本地终...

1796
来自专栏信安之路

从长亭的wiki上获取我想要的数据

通常有自己博客的朋友都可以算作是喜欢分享,技术能力是次要的,只要爱分享就是我们所寻找的有缘人。

750
来自专栏小白课代表

百度有广告?电影没处下?网页不让复制?贴吧页面太丑?今天课代表全方位强化你的浏览器。

在百度搜索了某个问题却发现第一页都是广告?好不容易找到了一篇文档却发现不让复制?在豆瓣看到一个评分很高的电影,想看却找不到资源?看到一张图片还要打开才能看高清大...

672
来自专栏非著名程序员

Bug 看你往哪里逃?我会让你无所遁形

编程中的 Bug ,Error 等各种报错是不可避免的,如果有一个好的 logcat 工具绝对可以帮助大家快速的定位到错误,并高效的找到解决办法。

1046
来自专栏DeveWork

移动端UC /QQ 浏览器的部分私有Meta 属性

如同桌面端一样,在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下,单从这...

24510
来自专栏程序员的碎碎念

云上部署Python3爬虫--以腾讯云+Ubuntu为例

Xshell学生和家用是免费的, 下载地址http://www.netsarang.com/download/free_license.html

2224

扫码关注云+社区