Layout несогласованности в хроме и IE11/Край

У меня есть макет, который работает 100% правильно в хроме:Layout несогласованности в хроме и IE11/Край

но его просмотра в IE 11 или край его отображающее дополнительные полосы прокрутки, поскольку страница теперь больше, чем высота браузера:

HTML:

<body ng-app="MyApp" layout="column" layout-fill> 

    <div layout="column" layout-fill> 

    <md-toolbar class="md-tall-xl"> 
     <div class="md-toolbar-tools"> 
     <h2 class="md-flex">Toolbar </h2> 
     </div> 
     <md-tabs class="tab-left-padding"> 
     <md-tab> 
      <md-tab-label>Item One</md-tab-label> 
     </md-tab> 
     <md-tab> 
      <md-tab-label>Item two</md-tab-label> 
     </md-tab> 
     </md-tabs> 
    </md-toolbar>  

    <md-content class="visableOverflow bg" layout="row" flex layout-fill layout-margin style="padding:8px;">  

     <md-whiteframe class="md-whiteframe-z1 overTheToolbar working-bg" layout="column" flex> 

     <md-content layout="column" layout-margin> 

      Lorem ipsum ... 

     </md-content> 

     </md-whiteframe> 

    </md-content> 

    </div> 
</body>

CSS:

.bg { 
     background-color: #E0E0E0; 
    } 

    md-toolbar.md-tall-xl { 
     height: 192px; 
     min-height: 192px; 
     max-height: 192px; 
    } 

    .overTheToolbar { 
     margin-top: -72px!important; 
     z-index: 3; 
    } 

    .visableOverflow { 
     overflow: visible; 
    } 

    .working-bg { 
     background-color: white; 
    } 

    .tab-left-padding { 
     padding-left: 15px; 
    }

Я пытался получить IE11/Грань, чтобы сделать это так же, как хром делает, но не могу заставить его работать. Я проверил https://github.com/philipwalton/flexbugs, если есть проблемы, но, похоже, ни одна из них не связана с моей проблемой.

Любые идеи?

Вот codepen: http://codepen.io/qorsmond/pen/aOPPPp

источник

2015-08-04 qorsmond

ли 'HTML {переполнения: скрытый; } 'help? – Abhitalks

Я пробовал, но он скрывает дополнительную полосу прокрутки. Моя цель - получить прокрутку md-контента, а не всю страницу. – qorsmond

Чувак Попробуйте class = "autoScroll" Проверьте это hepls или нет – Prasad

Я получил макет для отображения же на MS Крае переопределения мин-высоту на макете заполнить на DIV до 0, и это, кажется, работает. Я просто не знаю, почему это работает.

div > [layout-fill]{ 
    min-height: 0; 
}

http://codepen.io/qorsmond/pen/vObxae

источник

2015-08-05 19:31:06 qorsmond

Этот исправленный для меня Edge, но все еще есть проблемы в IE11. – ctb

Layout несогласованности в хроме и IE11/Край

ответ

Смежные вопросы