• css flex布局iOS8兼容性问题,大多数情况下都能够通过兼容性写法解决,比如: div { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; flex-direction: row; -webkit-flex-direction: row...

    css flex布局iOS8兼容性问题,大多数情况下都能够通过兼容性写法解决,比如:

    div {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 1;
      flex: 1;
      flex-direction: row;
      -webkit-flex-direction: row;
    }

    如果以上兼容性写法还不能解决问题,那就要看看是不是webpack等自动化构建工具打包的时候导致部分css丢失。可以通过查看打包后的文件查看css内容是否丢失。如果发现是webpack打包导致css部分内容丢失,可以试试下面的解决方法,我这边通过下面的方法能够解决问题。

    检查build目录下的utils.js 的cssloader是否有minimize: true选项,如下:

    const cssLoader = {
      loader: 'css-loader',
      options: {
        sourceMap: options.sourceMap,
        minimize: true
      }
    }

    检查webpack.prod.conf.js是否用到OptimizeCSSPlugin插件,如果有,则去掉,如下:

    // new OptimizeCSSPlugin({
    //   cssProcessorOptions: $sourceMap
    //   ? { safe: true, map: { inline: false } }
    //   : { safe: true }
    // })

    在项目根目录下找到.postcssrc.js文件,将该文件内容替换为下面所示:

    module.exports = {
      "plugins": {
        // to edit target browsers: use "browserslist" field in package.json
        "postcss-import": {},
        "autoprefixer": {
          browsers: [
            "last 10 versions",
            "ie >= 6",
            "ie_mob >= 6",
            "ff >= 10",
            "chrome >= 14",
            "safari >= 3",
            "ios >= 4",
            "android >= 4.0"
          ]
        }
      }
    }
    

    上面介绍的方法,主要针对的是webpack打包的时候,由于css插件优化导致部分css内容丢失的解决方法。

    这里介绍个小技巧,在本地运行的页面,复制该页面的URL,如:http://127.0.0.1:8881/#/test,然后打开草料二维码,根据url生成二维码,用真机扫描二维码,如果真机上扫出来的页面与本地的一致,说明真机浏览器是支持这些css的。

    下面主要总结一下只在iOS8上发现(目前只在iOS8上发现,其他浏览器还没发现问题)的一些比较坑的布局问题。

    1.元素设置flex:1后,子元素height: 100%失效的问题。

     <div id="container">
        <div id="div1">
          <div style="height: 100%; background-color: green;color: white">11111</div>
        </div>
        <div id="div2">
          <div style="height: 100%;color:white;background-color: blue">22222</div>
        </div>
        <div id="div3">3</div>
        <div id="div4">4</div>
    </div>
    <style>
      #container {
        display: flex;
        height: 100%;
      }
      #div1 {
        flex: 1;
        background-color:yellow;
      }
      #div2 {
        flex: 1;
        background-color: red;
      }
      #div3 {
        flex: 1;
        background-color:yellow;
      }
      #div4 {
        flex: 1;
        background-color: red;
      }
    </style>

    如上,理论上,div1,div2,div3,div4会平分父容器container,并且div1会被背景色为绿色的子元素撑满,div2会被背景色为蓝色的子元素撑满。实际上,iOS8上的显示效果如图1所示。可见div1,div2的子元素的height: 100%失效了。解决方法可以通过给div1,div2设置position:relative,然后设置div1,div2的子元素position: absolute;height: 100%;width: 100%。问题即可解决。如图2。

     <div id="container">
        <div id="div1">
          <div style="height: 100%; background-color: green;color: white">11111</div>
        </div>
        <div id="div2">
          <div style="height: 100%;color:white;background-color: blue">22222</div>
        </div>
        <div id="div3">3</div>
        <div id="div4">4</div>
    </div>
    <style>
      #container {
        display: flex;
        height: 100%;
      }
      #div1 {
        posititon: relative;
        flex: 1;
        background-color:yellow;
      }
      #div1 div {
        position: absolute;
        height: 100%;
        width: 100%;
      }
      #div2 {
        position: relative;
        flex: 1;
        background-color: red;
      }
      #div3 div {
        position: absolute;
        height:height;
        width: height;
      }
      #div3 {
        flex: 1;
        background-color:yellow;
      }
      #div4 {
        flex: 1;
        background-color: red;
      }
    </style>

    图1 height:100%失效

       

     

    图2 解决height:100%失效的问题​​​​​​

    2.一个奇怪的css失效问题,至今没想明白原因。使用vue 的v-if指令切换元素的显示,同时元素的css是通过子元素选择器选择时,元素的布局失效。如下面代码所示:

    <template>
      <div id="test">
        <div class="container">
          <div id="div1" v-if="!show">
            <div>左列</div>
            <div>右列</div>
          </div>
          <div id="div2" v-else>一列</div>
        </div>
        <div style="padding: 20px; text-align:center;background-color: red" @click="show=!show">切换</div>
      </div>
    </template>
    <style lang="less" scoped>
      .container {
        padding: 20px;
        & > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    </style>
    <script>
      export default {
        data() {
          return {
            show: false
          }
        }
      }
    </script>
    

    按照代码所写,理论上,不管点击‘切换’按钮多少次,div1的布局永远都是两边对齐,即包括‘左列’的块在左边,包含‘右列’的块在右边。然而在iOS8上,页面第一次加载完成后,div1的布局确实是两边对齐,当点击‘切换’按钮后,div1的布局就失效了,如下图所示。目前只在iOS8发现这个问题。

    图1 页面第一次加载完成时,div1两边对齐,布局正常

    图2 点击‘切换’按钮,div1隐藏,div2 显示

    图3.点击‘切换’按钮,div1显示,div2隐藏,此时div1布局异常

    从图3可以看出,但div1再次显示时,div1的布局不再是两边对齐(图1所示)。iOS8出现这个bug的原因还没想明白,但可以稍微修改一下代码,就能解决这个问题,如下所示,使用class代替子元素选择器选择div1的布局:

    <template>
      <div id="test">
        <div class="container">
          <div id="div1" class="row" v-if="!show">
            <div>左列</div>
            <div>右列</div>
          </div>
          <div id="div2" v-else>一列</div>
        </div>
        <div style="padding: 20px; text-align:center;background-color: red" @click="show=!show">切换</div>
      </div>
    </template>
    <style lang="less" scoped>
      .container {
        padding: 20px;
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    </style>
    <script>
      export default {
        data() {
          return {
            show: false
          }
        }
      }
    </script>
    

     

    展开全文
  • 其他ios版本都还好,唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现,safari使用的是webkit内核,在ios8上需要单独加一下兼容才起作用。 display: flex; display: -webkit-flex; justify-...

    最近在做项目时,使用到了flex布局。其他ios版本都还好,唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现,safari使用的是webkit内核,在ios8上需要单独加一下兼容才起作用。

    display: flex;
    display: -webkit-flex; 
    justify-content: center;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;

     

    转载于:https://www.cnblogs.com/rachelch/p/9075729.html

    展开全文
  • 结果在测试的时候发现ios8以下版本居然不支持flex布局,包括justify-content这类属性,都不支持,最后只能用兼容性的写法,问题就解决了。display: flex;display: -webkit-flex;justify-content: space-between;-...

    有次和同事一起写了一个项目,一开始没想到这个flex布局的兼容问题,主要是之前也没遇到过。结果在测试的时候发现ios8以下版本居然不支持flex布局,包括justify-content这类属性,都不支持,最后只能用兼容性的写法,问题就解决了。

    display: flex;

    display: -webkit-flex;

    justify-content: space-between;

    -webkit-justify-content: space-between;

    /*-webkit-box-align: center;*/

    -webkit-align-items: center;

    /*-ms-flex-align: center;*/

    align-items: center;

    加上-webkit-这个就好了。
    展开全文
  • ios9 以下 flex 兼容问题 详情描述 ios9 以下,display:flex 元素的第一级子元素必须是block,否则 flex 布局是不会生效的

    ios9 以下 flex 兼容问题

    详情描述

    ios9 以下,display:flex 元素的第一级子元素必须是block,否则 flex 布局是不会生效的

    展开全文
  • iOS9.X系统在渲染微信小程序页面时无法对使用flex布局的列表页面、文章内容类型页面进行正常渲染。表现为页面内容不显示或者页面样式错乱。 场景一:文章内容页面样式错乱 页面代码 &lt;view class='...

    iOS9.X系统在渲染微信小程序页面时无法对使用flex布局的列表页面、文章内容类型页面进行正常渲染。表现为页面内容不显示或者页面样式错乱。

    场景一:文章内容页面样式错乱

    页面代码

    <view class='container'>
        <view class='articleTitle'>意外健康险索赔指引</view>
        <view class='somebodyNamed'>尊敬的客户,您好:</view>
        <view class='articleParagraph'>为及时收到保险赔款,请您认真阅读以下索赔指引,根据实际情况提供相关材料。</view>
        <view class='articleItem'>一、通用资料:</view>
        <view class='articleParagraph'>1、医疗材料:发票、用药清单、诊断证明、门诊病历、住院病历、出院小结、检查报告、他方已赔付证明(如社保报销单等)</view>
        <view class='articleParagraph'>2、领款账户信息、领款人身份证明(个人提供身份证、单位提供营业执照) 出险人为未成年人,提供监护人身份证、户口本或出生证明或收养关系证明
        </view>
        <view class='articleParagraph'>3、委托领款:授权委托书、委托方及受托方身份证明</view>
        <view class='articleParagraph'>4、出险人身份证明</view>
        <view class='articleParagraph'>5、事故证明材料:</view>
        <view class='paragraphItem'>a.交通事故:行驶证、驾驶证、交通事故认定书、事故调解书</view>
        <view class='paragraphItem'>b.其他事故证明材料(公安、消防证明、安监证明、法院判决等)</view>
        <view class='articleParagraph'>6、涉及第三方赔偿,提供他方赔偿明细</view>
        <view class='articleItem'>二、残疾案件增加:</view>
        <view class='articleParagraph'>按意外险条款或保险合同约定的评残标准出具的伤残鉴定报告</view>
        <view class='articleItem'>三、死亡案件增加:</view>
        <view class='articleParagraph'>1、死亡证明、火化证明、户口注销证明、尸检报告</view>
        <view class='articleParagraph'>2、死者受益人(遗产继承人)人员清单及证明材料(公安部门出具的直系亲属关系证明、遗嘱、户口本、出生证明、结婚证、公证证明、其他证明)</view>
        <view class='articleItem'>四、疾病增加:</view>
        <view class='articleParagraph'>1、等待期出险的,提供历年保单</view>
        <view class='articleParagraph'>2、历史病历</view>
        <view class='articleParagraph'>3、重大疾病索赔,需提供病理检验报告及条款约定的其他证明材料</view>
        <view class='articleItem'>五、建筑施工人员团体意外险增加:</view>
        <view class='articleParagraph'>劳动合同、工资表或其它用工证明,工程分包合同及施工合同</view>
        <view class='articleItem'>六、借款人意外险增加:</view>
        <view class='articleParagraph'>借款合同、贷款余额证明等相关资料</view>
        <view class='articleItem'>七、旅游意外险增加:</view>
        <view class='articleParagraph'>旅行社当次出游行程表、机票或车票、护照,财产损失证明、物损清单、相关发票或购置交易记录、航班延误证明、登机牌等</view>
        <view class='articleItem'>八、不记名投保每个被保险人均分保额的保单需提供所有被保险人员信息、身份证明、关系证明</view>
        <view class='articleItem'>九、保险人需要的其他证明材料</view>
    </view>

    样式代码

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #e6eaed;
      overflow-x: hidden;
    }
    .articleTitle {
      width: 100%;
      text-align: center;
      font-size: 34rpx;
      /*font-weight: bold;*/
      margin-top: 42rpx;
      margin-bottom: 32rpx;
      font-family: "PingFangSC-Medium";
    }
    
    .somebodyNamed {
      font-family: "PingFangSC-Regular";
      color: #333;
      line-height: 36rpx;
      font-size: 28rpx;
      width: 100%;
    }
    
    .articleParagraph {
      width: 100%;
      font-size: 28rpx;
      word-break: break-all;
      line-height: 36rpx;
      color: #666;
      font-family: "PingFangSC-Regular";
      margin-top: 24rpx;
    }
    
    .articleItem {
      width: 100%;
      font-size: 28rpx;
      /*font-weight: bold;*/
      word-break: break-all;
      margin-top: 40rpx;
      font-family: "PingFangSC-Medium";
    }
    
    .paragraphItem {
      width: 91.5%;
      font-size: 28rpx;
      word-break: break-all;
      padding-left: 40rpx;
      font-family: "PingFangSC-Regular";
      text-indent: 40rpx;
      color: #666;
    }

    解决方案:在类为container的view下再套一层view,其Display设置为block即可。代码如下

    <view class='container'>
      <view class='guid-content'>
        <view class='articleTitle'>意外健康险索赔指引</view>
        <view class='somebodyNamed'>尊敬的客户,您好:</view>
        <view class='articleParagraph'>为及时收到保险赔款,请您认真阅读以下索赔指引,根据实际情况提供相关材料。</view>
        <view class='articleItem'>一、通用资料:</view>
        <view class='articleParagraph'>1、医疗材料:发票、用药清单、诊断证明、门诊病历、住院病历、出院小结、检查报告、他方已赔付证明(如社保报销单等)</view>
        <view class='articleParagraph'>2、领款账户信息、领款人身份证明(个人提供身份证、单位提供营业执照) 出险人为未成年人,提供监护人身份证、户口本或出生证明或收养关系证明
        </view>
        <view class='articleParagraph'>3、委托领款:授权委托书、委托方及受托方身份证明</view>
        <view class='articleParagraph'>4、出险人身份证明</view>
        <view class='articleParagraph'>5、事故证明材料:</view>
        <view class='paragraphItem'>a.交通事故:行驶证、驾驶证、交通事故认定书、事故调解书</view>
        <view class='paragraphItem'>b.其他事故证明材料(公安、消防证明、安监证明、法院判决等)</view>
        <view class='articleParagraph'>6、涉及第三方赔偿,提供他方赔偿明细</view>
        <view class='articleItem'>二、残疾案件增加:</view>
        <view class='articleParagraph'>按意外险条款或保险合同约定的评残标准出具的伤残鉴定报告</view>
        <view class='articleItem'>三、死亡案件增加:</view>
        <view class='articleParagraph'>1、死亡证明、火化证明、户口注销证明、尸检报告</view>
        <view class='articleParagraph'>2、死者受益人(遗产继承人)人员清单及证明材料(公安部门出具的直系亲属关系证明、遗嘱、户口本、出生证明、结婚证、公证证明、其他证明)</view>
        <view class='articleItem'>四、疾病增加:</view>
        <view class='articleParagraph'>1、等待期出险的,提供历年保单</view>
        <view class='articleParagraph'>2、历史病历</view>
        <view class='articleParagraph'>3、重大疾病索赔,需提供病理检验报告及条款约定的其他证明材料</view>
        <view class='articleItem'>五、建筑施工人员团体意外险增加:</view>
        <view class='articleParagraph'>劳动合同、工资表或其它用工证明,工程分包合同及施工合同</view>
        <view class='articleItem'>六、借款人意外险增加:</view>
        <view class='articleParagraph'>借款合同、贷款余额证明等相关资料</view>
        <view class='articleItem'>七、旅游意外险增加:</view>
        <view class='articleParagraph'>旅行社当次出游行程表、机票或车票、护照,财产损失证明、物损清单、相关发票或购置交易记录、航班延误证明、登机牌等</view>
        <view class='articleItem'>八、不记名投保每个被保险人均分保额的保单需提供所有被保险人员信息、身份证明、关系证明</view>
        <view class='articleItem'>九、保险人需要的其他证明材料</view>
      </view>
    </view>

    样式代码:

    .guid-content{
      display: inline-block;
      width: 91.5%;
    }

     注意:width依据实际需求设定。

    场景二:列表页内容不显示

    解决方案与场景一相同,在页面的最顶级父元素下再嵌套一个view来包括住所有其他子元素并把Display设置为block即可,不影响其他子元素的Display设置为flex。

    展开全文
  • 网上有很多类似例子,我自己也使用vue写一个简单的demo,主要利用flex布局,解决ios端偶现的,fixed或者absolute布局导致的输入框被键盘遮挡问题,至于键盘收起页面卡住等其他问题 请参考链接:h5页面在不同ios设备...
  • Chrome 73导致的flex布局崩坏现象 项目中会存在如下几种嵌套flex结构: <style> /* 通用样式 */ .card { width: 200px; height: 300px; margin: 20px; border: 1px solid #999; } .flex { ...
  • flex布局的兼容性

    2018-03-29 15:53:05
    一直以来用flex解决居中问题很方便,几个项目做下来,...然后又就去研究了一下flex的兼容性,下面分享一下flex布局的兼容性写法。.flex { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD -...
  • 前端发展很快,以前在移动端使用Flex布局还要想三想的文章也许已经过时了,这篇文章主要介绍使用Flex进行常规布局及在移动端的处理。 Flex语法 Flex布局意为"弹性布局",用来为盒模型提供更多灵活性。此外,Flex...
  • 转载自Flex布局新旧混合写法详解(兼容微信)flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器)。然而在移动开发中,本来绝大...
  • 仔细发现,就会察觉到是flex布局的兼容性问题了,在日常开发中,我似乎没有养成这样需要display:-webkit-flex;这样多书写一行代码的习惯,因为觉得现在大多数人的手机不应该那么老。现在开来,做开发还是需要多照顾...
  • ios9不兼容flex

    2020-03-14 16:57:31
    <button class="btn> <img src="./m24.png" alt=""><span>啊啊啊</span> </button> <style> .btn{ display: -webkit-flex; display: flex; ...
  • 苹果safari支持flex布局

    2019-10-09 00:13:51
    今天突然发现flex布局不支持safari 解决办法 .page-wrap { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ displa...
  • 1.margin在IOS中失效  在页面中元素使用margin值,在某些IOS设备下会出现失效的情况,而安卓机则正常显示,此问题暂无直接的...flex中使用 绝对定位,ios出现严重错位,导致父级元素也会变成绝对定位,Android能...
  • 父容器设置了 flex 布局,子元素的 width 属性为:240px 会失效 解决办法: 使用 flex 布局子项属性:flex (flex-basis)属性 flex: 1 1 240px; 参考: CSND flex布局
  • flex布局下图片变形的解决方法 flex布局是现在常用的一个布局方式,但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像,右边文字的时候,发现固定图片的宽度时,图片宽度仍然发生了变化。 下图是...
  • 了解Flex布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,...
  • 在iphone5手机中,flex布局失效。解决方案如下: 在package.json中加上: "browserslist": [ "&gt; 1%", "last 2 versions", "not ie &lt;= 8", "ios ...
  • 本文作为 Flex 布局进阶,不对基础做详细介绍,关于 Flex 基础知识请到阮一峰老师的Flex 布局教程:语法篇 看过基础,或者已经使用 Flex 布局的朋友可以根据本文试着动手写一写,先不急着开工,看看其它大型框架...
1 2 3 4 5 ... 20
收藏数 6,758
精华内容 2,703
关键字:

9 flex布局 ios