Question

我设计的网站未被iPhone和IExplorer11正确显示。我已经检查了

windows（chrome，FFox）确定

android（chrome）确定

Ipad Safari，Chrome 确定

Iphone Safari和IE11 重叠问题

只要flex-direction：列媒体查询工作重叠，就会在大屏幕上的IE11上正确显示网站。

我有一个基础div #main包含另外两个基础div #right和#left

我的基础div的css代码是：

#main{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: 10px;
    background-color: #f0f0f0;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
}


#left{
    -webkit-box-flex: 4;
    -webkit-flex-grow: 4;
    -ms-flex-positive: 4;
    flex-grow: 4;

    -webkit-flex-basis: 66.66%;
    -ms-flex-preferred-size: 66.66%;
    flex-basis: 66.66%;

    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin-right: 7.5px;
    position: relative;
}


#right{
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;

    -webkit-flex-basis: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;


    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin-left: 7.5px;
    position: relative;
}

@media (max-width: 755px){
    #main{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

当我在Iphone Safari上检查网站时，IE11（小屏幕）右侧部分重叠在左侧部分。

我尝试过一些解决方案，但没有一个能够解决问题。（例如设定最小高度）

我在等你的评论。谢谢你的阅读。

here is the link to the page

Answer 1

这为我解决了一切：

@media (max-width: 755px){
  #main {
    display: block; /* remove flex parent */
  }
}

或此版本：

@media (max-width: 755px){
  #left, #right {
    flex-basis: auto;
  }
}

Flex Box上的IE11和Safari上的Flex Box重叠

1 个答案: