解决 各浏览器不支持display:flex的最简单办法

通常我们想让一行元素平均分配宽度,而且还是可以扩展自适应的;不管元素个数多少;

那么我们通常不考虑IE9以下及其它个别浏览器的时候 父级用 display:flex; 子级用 flex: 1;

但有时产品 要求 兼容 各浏览器 及IE8/9;我们不得不想尽各种办法,  包括JS/JS插件等

但大家都忽略了一个非常有历史却很好用,不存在 兼容问题的表格table布局,我个人超喜欢table布局,因为 它可以很好的扩展;还不存在兼容性;

凡是有关表格数据,表单数据,只要看起来比较整齐 ,我都会首选 表格table布局的;

现在解决上述问题:

<table width="100%" class="buyProcess Cf Tc Mt15">
  <tr>
    <td width="10%">1</td>
    <td width="10%" class="cur">2</td>
    <td width="10%">3</td>
  </tr>
</table>

随便添加两个

<table width="100%" class="buyProcess Cf Tc Mt15">
  <tr>
    <td width="10%">1</td>
    <td width="10%" class="cur">2</td>
    <td width="10%">3</td>
    <td width="10%">4</td>
    <td width="10%">5</td>
  </tr>
</table>

时间: 2024-10-10 20:36:34

解决 各浏览器不支持display:flex的最简单办法的相关文章

IE6/IE7浏览器不支持display: inline-block;的解决方法

display: inline-block;在IE6与IE7中存在bug. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征

(有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug

项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧width:80px:. 本来在我的机器上是各种ok的,可是交给后端的兄弟们后发现在他的机器上左侧并没有flex:1; 总是以一个固定的宽度杵在那里,破坏掉布局,后来一查看,原来是后端的chrome是最新版本, 而我的这台机器是旧版本,两个版本的chrome对display:flex的解析竟然不一样. 解决

【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 <audio autopaly> <video autoplay>在桌面版浏览器也将失效. 那么怎么解决呢?解决方式如下: 在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为

解决安卓浏览器不支持 position: fixed;

修改增加代码 #tag_show {display:none;position: fixed; top: 20%;z-index: 9999999;width:100%;overflow:scroll; } #tag_show img {width:60%;margin-left:20%}

解决uc浏览器不支持vw单位的方法

插入下段代码,使用rem来代替vw <script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidt

解决chrome浏览器不支持本地ajax请求的问题(非在快捷方式上操作)

1.cmd进入dos环境 2.dos  下进入(chrome.exe所在目录) 3.运行命令chrome.exe --allow-file-access-from-files; 然后重启谷歌浏览器,就可以了.

解决UC浏览器或微信浏览器上flex兼容问题

在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */

display:flex和display:box布局浏览器兼容性分析

display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实际的测试中display:flex不能完全的替代display:box.display:flex的浏览器兼容性比较麻烦. 1.关于display:flex 对于响应式布局,使用flex很方便,但是它的兼容性也是一个值得考虑的问题. <div class="container">

前端布局神器display:flex

2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现各种页面布局.目前已得到所有现在浏览器的支持. flex浏览器支持 一.Flex布局是什么? Flex是Flexible Box的缩写,翻译成中文就是"弹性盒子",用来为盒装模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示 }