为什么 IE 10 会将内容推出视口？

Question

我的问题是我在屏幕右侧放置了两个按钮。但是不知何故，对于 IE10（未在其他版本中测试），按钮被推出了视口。其他人有这个问题吗？我该如何解决？

它应该是什么样子（在 Chrome 中看起来是什么样子）：

它在 IE10 中的样子（按钮位于右侧某处，不再可见，甚至没有滚动条）：

HTML:

<div class="section-header">
    <div tabindex="0" class="section-toggle section-toggle-up" role="button" aria-pressed="false">
        <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
        <div class="html-face">Reader 1</div>
    </div>
    <div class="section-header-widgets">
        <div tabindex="0" class="slider slider-up" role="button" aria-pressed="false">
            <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
            <div></div>
        </div>
        <div class="buttonContainer">
            <div class="sidebuttons">
                <button type="button" class="removeButton"></button>
                <button type="button" class="exportButton"></button>
            </div>
        </div>
    </div>
</div>

CSS:

.section-header, .section-header-widgets {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-align: center;
    -ms-flex-pack: start;
}

.section-header-widgets {
    width: 100%;
}

.section-toggle {
    min-height: 50px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 2.5em;
    font-weight: bold;
    line-height: 2.5em;
    max-height: 2.5em;
    cursor: pointer;
}

.section-toggle-up {
    min-width: 200px;
}

.slider {
    background-repeat: no-repeat;
    background-position: left;
    height: 34px;
    width: 65px;
    margin-left: 3em;
    cursor: pointer;
    border: 1px solid black;
}

.buttonContainer {
    flex: 1;
    -ms-flex: 1;
    text-align: right;
}

.addButton, .removeButton, .exportButton, .openFileButton {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 1px solid black;
    cursor: pointer;
    margin-right: 20px;
}

Answer 1

Flexbox 支持在 IE 10 中似乎有点参差不齐。看来您可以通过以下方式使其正常运行：

正在从 .section-header-widgets

width: 100%;

将 flex-grow: 1; 和 -ms-flex: 1 0; 添加到 .section-header-widgets

    .section-header, .section-header-widgets {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     display: -ms-flexbox;
     -ms-flex-direction: row;
     -ms-flex-align: center;
     -ms-flex-pack: start;
    }
    
    .section-header-widgets {
        /*Removed
        width: 100%;*/
        /*Added*/
        flex-grow: 1;
        -ms-flex: 1 0;
    }
    
    .section-toggle {
     min-height: 50px;
     background-repeat: no-repeat;
     background-position: left;
     padding-left: 2.5em;
     font-weight: bold;
     line-height: 2.5em;
     max-height: 2.5em;
     cursor: pointer;
    }
    
    .section-toggle-up {
     min-width: 200px;
    }
    
    .slider {
     background-repeat: no-repeat;
     background-position: left;
     height: 34px;
     width: 65px;
     margin-left: 3em;
     cursor: pointer;
        border: 1px solid black;
    }
    
    .buttonContainer {
     flex: 1;
     -ms-flex: 1;
     text-align: right;
    }
    
    .addButton, .removeButton, .exportButton, .openFileButton {
     height: 40px;
     width: 40px;
     padding: 0;
     border: 1px solid black;
     cursor: pointer;
     margin-right: 20px;
    }

<div class="section-header">
 <div tabindex="0" class="section-toggle section-toggle-up" role="button" aria-pressed="false">
  <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
  <div class="html-face">Reader 1</div>
 </div>
 <div class="section-header-widgets">
  <div tabindex="0" class="slider slider-up" role="button" aria-pressed="false">
   <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
   <div></div>
  </div>
  <div class="buttonContainer">
   <div class="sidebuttons">
    <button type="button" class="removeButton"></button>
    <button type="button" class="exportButton"></button>
   </div>
  </div>
 </div>
</div>

JS Fiddle

为什么 IE 10 会将内容推出视口？

Why does IE 10 push the content out of the viewport?

css

internet-explorer-10