关于overflow适配IE的问题

今天做页面的时候，遇到了一个问题。

在一个大的DIV里面放入了几个并排的小DIV，超出大DIV的部分不换行，会隐藏。

最开始是在父级DIV增加了overflow：hidden，display:flexbox，display:box，display:-ms-flexbox

display:-ms-flexbox添加这一句的作用主要是想适配IE浏览器，但是在浏览器中展示的时候遇到了问题。

其余的浏览器都展示正常，子div的超出部分隐藏了，但是在IE浏览器中没有超出部分，所有的子div自动拉伸，

铺满了整个div，搜索了很久，未找到适合我的页面布局的解决方案。

最后舍弃了在父级div中使用overflow：hidden属性，改为了overflow：auto属性。

并且在父级div和子级的几个div中间加了一层二级div，并给div了一个white-space: nowrap;属性。

该属性的作用是强制不换行，最终达到了我需要的效果。

中间遇到了一个小的展示问题，即子级div之间会有空白，后来发现空来是由于html代码中子级div换行显示导致，

最终把子级div不换行显示，达到最终效果。

学无止境，继续为解决一切BUG而奋斗不止，

关于overflow适配IE的问题相关推荐

Web App适配iPhoneX
前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native App来说,适配并不算困难(当然 ...
移动端页面适配解决方案
一.流体布局所谓的流体布局,就是用百分比来定义宽度,最外层容器的宽度设置为100%,就可以适配不同的屏幕,子元素按照比例来设置百分比,子元素整体的百分比之和就是100%,但是如果有子元素设置了边框, ...
cordova项目适配iPhoneX
iPhoneX适配踩坑浅谈 Apple每次退出新尺寸的iphone都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native Ap ...
H5页面适配所有iPhone和安卓机型的六个技巧
1.viewport 简单粗暴的方式: <meta name="viewport" content="width=320,maximum-scale=1.3,use ...
HTML页面代码移动端和pc兼容,pc端网站如何实现移动端适配？
4.流动布局(fluidgrid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的. .main{ float:right; width:70%; } .leftB ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
webapp 微信开发适配问题
文章摘自:http://www.cnblogs.com/oksite/p/4630462.html 前段时间由于公司要做微信app 前端主要有我一个人独立开发分享一下自己独立开发微信app的一些经验 ...
移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法...
其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法原理:其实他们都是通过css3的媒体查询来实现的步骤思路: 1.给目标 ...
rem适配的浏览器_移动端网页布局适配rem方案小结
前言根据 W3C 规范中对 1rem 的定义: 1rem 与等于根元素 font-size 的计算值.当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照. 这就意味着 1 ...

关于overflow适配IE的问题

关于overflow适配IE的问题相关推荐

最新文章

热门文章