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

Question

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

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

在IE10中看起来是什么样的（按钮位于右侧的某个位置，在那里它们不再可见，甚至没有滚动条）：

Live example on the jsFiddle

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

在IE 10中，Flexbox支持似乎有点不稳定。看起来你可以通过它来表现：

• 从width: 100%;
中移除.section-header-widgets
• 将flex-grow: 1;和-ms-flex: 1 0;添加到.section-header-widgets

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> JS Fiddle