Question

我在IE 11和Edge上遇到了这个代码的问题，右边的第三个图像在窗口仍然是全宽的情况下换行到第二行！但它不应该在下面检查代码。

图像或public void valueChangeListener(ValueChangeEvent valueChangeEvent) { BindingContext bctx = BindingContext.getCurrent(); BindingContainer bindings = bctx.getCurrentBindingsEntry(); JUCtrlListBinding list = (JUCtrlListBinding) bindings.get("YourBindingforLOV"); String selectedValue = (String) valueChangeEvent.getNewValue(); list.getListIterBinding().setCurrentRowWithKeyValue(selectedValue); Row currRow = list.getListIterBinding().getCurrentRow(); if (currRow != null) { String s = (String) currRow.getAttribute("YourAttributeName"); } } div是我在缩小屏幕时响应，但它似乎在600像素之后工作。我做了很多关于此的研究，但找不到任何线索。

任何人都可以请帮助。

如果您想测试代码，可以使用cross browser testing创建免费帐户并使用实时测试。

__article

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  outline: none;
}

.__main {
  display: flex;
  flex-flow: row wrap;	
}

.__article {
  padding:5px;
  flex-basis: 33.33%;
}

@media only screen and (max-width: 600px) {
	.__article {
  padding:5px;
  flex-basis: 70%;
	margin: 0 auto;
}
}

Answer 1

首先，摆脱所有这些前缀，肯定不需要，特别是webkit。如果您尝试支持IE10，则可能需要MS前缀，但不适用于IE11。

由于添加了填充，元素正在换行。似乎 box-sizing:border-box和display:flex不能在IE 11上相处。因此，使用flex-basis：calc(33.33% - 10px);来补偿两个5px填充，并删除box-sizing:border-box，以便其他浏览器不会获得更窄的宽度，并且它应该可以正常工作

＆＃13;

*,
*:after,
*:before {
  /*box-sizing: border-box;*/
  margin: 0;
  outline: none;
}

.__main {
  display: flex;
  flex-flow: row wrap;	
}

.__article {
  padding:5px;
  flex-basis: calc(33.33% - 10px);
}

＆＃13;

<div class="__main">
<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
	<div class="__article">
	<div class="div__img">
		<img src="http://via.placeholder.com/300x400" width="100%" />
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>

＆＃13;

（我已经删除了媒体查询，仅用于SO片段的演示目的）

为什么我的图像使用IE 11在全宽屏幕上换行？

1 个答案: