Microsoft Edge中的CSS位置问题

问题描述

我绝不是一个网络开发者，我更多的是基础设施方面的事情。无论如何，我在XServe G4上构建了一个带有AMP堆栈的FreeBSD服务器，并想要打开只打印It Works！的通用登录页面。在一个纯白的屏幕上有点更有趣的东西，当我遇到一个问题的CSS。

这里的页面 - 它的工作原理在Chrome ，Opera，Mac和Win10上的Safari（我没有在Win10上检查Safari）

在Microsoft Edge上，我得到：

我需要在CSS中做些什么才能正确定位该元素？

页面代码如下

 < html> 
< head> 
< style> 
 body {
 background-image：url（splash.png）; 
 background-repeat：no-repeat; 
 background-position：center; 
 background-color：#BEBEBE; 
 font-family：Arial，Verdana，serif; 
 justify-content：center; 
} 
 
 #container {display：block;位置：相对; 
 width：60％; 
 top：60％; 
 font-weight：bold; 
 margin：auto; 
} 
 
 
 
 #pretext {display：inline-block; color：＃b80000; font-size：3em; 
} 
 #posttext {display：inline-block; 
 color：#FFFFFF; font-size：3.5em; 
 font-weight：1500; } 
 
 #logo {
 height：50px; 
 position：absolute; 
 bottom：1％; 
 right：1％; 
 padding-bottom：5px; 
 
} 
 #logo img {height：inherit; vertical-align：top; } 
 
＃svr-info {font-size：.75em; 
 color：＃dae6f7; 
 width：auto; 
 position：absolute; 
 bottom：0px; 
 right：10px; 
 padding-top：5px; 
 
} 
 
 #phpinfo a {font-size：.75em; 
 text-decoration：none; 
} 
 
 a：hover {font-size：1.3em; } 
 
 
< / style> 
< / head> 
< body> 
 
< div id =container> 
< div id =pretext> Think< / div> 
< div id =posttext>正确。< / div> 
< / div> 
< div id =logo> 
< img src =powerpc-logo.png/> 
< img src =apple-logo.png/> 
< / div> < br> 
 
< div id =svr-info> 
<？php 
 echo $ _SERVER ['SERVER_SOFTWARE']; 
 echo---; 
 echo php_uname（'r'）; 
 echo; 
 echo php_uname（'m'）; 
 
？> 
< / div> 
< div id =phpinfo> 
< a href =test.php> PHPINFO页面< / a> 
< / div> 
 
< / body> 
< / html>`
  

解决方案

div class =snippetdata-lang =jsdata-hide =false>

 <！DOCTYPE html>< html>< head> < title>< / title> < meta charset =utf-8/> < style> body {margin：0px; padding：0px; } .container {height：100vh; } .text1 {display：inline-block; margin：0 auto; }< / style>< / head>< body>< div class =container> < div style =display：table; margin：0 auto; text-align：center; position：relative; top：30％;> < img src =logo.pngstyle =width：100px; height：100px;/> < br /> < h1 class =text1> Think Correctly< / h1> < / div> < div style =position：absolute; bottom：10px; right：10px;> < img src =logo2.png/>< span>标志2< / span> < / div>< / div>< / body>< / html>