Question

在我把这该死的东西扔到窗外之前，我可以借一个人的眼睛吗？

SHORT VERSION ：当IE无法固定高度/宽度时，在IE9中可靠地将div居中的正确方法是什么？

场景：我正在自定义我们通过windows存储应用程序进行身份验证的ping联邦服务器的模板。我之所以提到这一点，是因为Windows商店应用程序（不要与UWP混淆）使用IE9的jank版本。

我的问题... 我甚至无法制作一个该死的编码器，因为他们不支持IE9 ....我只是试图让第一个孩子居中div垂直和水平。

现在，IE9不支持flexbox，所以没有爱。但我能做到;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

确实很好地集中在它上面，除了在IE屏幕底部显示一个大的空白区域外，在IE浏览器上看起来很棒。反过来，这也会导致滚动条出现甚至不必要......

由于div不能是固定的宽度/高度，我没有得到其他修复工作。它也没有帮助我一直在做.NET的东西这么久我的css生锈了。

所以有人可以开始我的周末，并启发我一些IE功夫修复，所以今晚我可能会赞美你的名字和烤面包啤酒吗？：）

希望下面的代码片段（在IE浏览器中作为IE9运行）将有助于直观地显示我的问题，这个愚蠢的空白已成为我的克星......

html, body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url("https://static.pexels.com/photos/1350/blur-blurred-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: fixed;
}

div {
  min-width: 250px;
  min-height: 250px;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div></div>

Answer 1

旧的方法是使用额外的元素，但是对于IE9会有伪代码：

html, body, body:before {
  height: 100%;
  text-align: center;
}

body:before {
  content: '';
  display: inline-block;
  margin-left: -0.25em;
  width: 0;
  vertical-align: middle;
}

div {
  min-width: 250px;
  max-width: 99.5%; /* or white-space on body for security to avoid div wrap under pseudo, 
  do not forget to reset to normal if you choose so */
  min-height: 250px;
  background: green;
  display: inline-block; /* i'll be against top or left without disappearing if window is too small */
  vertical-align: middle;
  /* text-align: left; */
  }

/* not IE 9 , bg-cover ? */
body {
  background-image: url("https://static.pexels.com/photos/1350/blur-blurred-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: fixed;
}

<div></div>

IE9中居Div没有固定的高度/宽度

1 个答案: