关于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 条评论
登录 后参与评论

相关文章

来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2830
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5218
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4385
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2752
来自专栏落花落雨不落叶

canvas画简单电路图

83111
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

38410
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3278
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005

扫码关注云+社区