Question

我正在使用flex-box属性并尝试在IE 10 + @media only screen and (max-width: 960px)上定位div，但我还没有找到实现这一目标的方法。我在CSS代码的末尾使用了这个@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { selector here... }但是没有用。

这是我尝试做的简单代码。

＆＃13;

.main {
	display: flex;
	flex-flow: row wrap;
	padding: 10px;
	border: 2px solid red;
	min-height: 300px;
	width: 100%;
	max-width: 960px;
	
	justify-content: space-between;
	align-items: center;
}

.L, .R {
	flex-basis: 48%;
	/*for IE */
	/* flex-basis: calc(48% - 24px); */
	border: 2px dotted blue;
	height: 200px;
}

@media only screen and (max-width: 768px) {
	.L, .R {
		flex-basis: 90%;
		/*for IE ** how can I add this only for IE 10+ ** */
	/* flex-basis: calc(90% - 24px); */
		margin-bottom: 10px;
	}
	.main {
		justify-content: center;
	}
}

＆＃13;

<div class="main">
	<div class="L">
	</div>
	<div class="R">
	</div>
</div>

＆＃13;

Answer 1

根据this论坛帖子，使媒体查询仅适用于IE10 +的正确方法是这样做：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .L, .R {
        flex-basis: calc(48% - 24px);
     }
}



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (max-width: 768px) {
     .L, .R {
        flex-basis: calc(90% - 24px);
     }
}

Answer 2

**Try this->**


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

Answer 3

There is no way to target screen for IE 10+ (only) in css, but using special css file for IE only or Javascript would do the job.

如何仅在IE 10+中定位屏幕查询

3 个答案: