2016-11-07 13 views
0

我有一段flexhtml這是在鉻和Firefox完美工作,但在I.E. 10拒絕排列成一排:I.E.中的Flex 10沒有放在行中的項目

<div id="option-information-container" layout="row"> 
    <div class="extra-info-container" layout="row" flex="100" layout-padding layout-align="start start"> 
     <div id="part-note-info-image" class="extra-info-image" flex="0"></div> 
     <div class="message-container" flex="90"> 
      <div class="message-header" layout-padding translate>Detail Notes</div> 
      <div ng-repeat="partNote in currentPage.pageData.PartNotes">{{partNote.PartNoteText}}.</div> 
     </div> 
    </div> 
</div> 

CSS:

#part-note-info-image { 
    background-size: contain; 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QkNGQTE1QTE3NzAxMUU0QjcxOUQ4RjE1NzBGOUZDOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QkNGQTE1QjE3NzAxMUU0QjcxOUQ4RjE1NzBGOUZDOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQ0ZBMTU4MTc3MDExRTRCNzE5RDhGMTU3MEY5RkM5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRCQ0ZBMTU5MTc3MDExRTRCNzE5RDhGMTU3MEY5RkM5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+nrGB7QAADupJREFUeNrsXQuUVVUZ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'); 
    background-repeat: no-repeat; 
} 

.extra-info-image { 
    height: 20px; 
    width: 20px; 
} 

在Chrome和Firefox,圖像和詳細註釋出現並排,在I.E.細節註釋位於圖像下方的行中。我無法弄清楚如何讓這兩個人佔據同一排。線條上的間距顯示Detail room容器有空間可供使用。

編輯: 這裏有一個codepen再現問題,與JS抽象出來: http://codepen.io/anon/pen/eBNBGZ

+1

使用flexbox時,請注意與舊版瀏覽器的兼容性:http://stackoverflow.com/q/35137085/3597276 –

+0

好吧......非常感謝。我會從中看到文檔,看看我能否取得進展。 –

+0

那麼一切都已經崩潰成一個單一的小空間I.E ... –

回答

1

E10沒有實現完整版Flexbox的,但舊規範(中間人)。你可以閱讀更多here。要在IE10使用Flexbox的,你將需要使用前綴版本:

.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;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

我會建議你使用autoprefixer工具,像一飲而盡或咕嚕一些構建工具。 在autoprefixer選項中請記住以IE10及以上爲目標。

options: { 
    browsers: ['ie >= 9'] 
} 
+0

謝謝蘭德爾弗拉格。我希望你知道羅蘭下次會抓到你,現在他有了號角。 –

相關問題