CSS Position Problems in Microsoft Edge

问题

I am by no means a web developer, I am more on the infrastructure side of things. Anyway, I built a FreeBSD server with an AMP stack on an XServe G4 and wanted to spruce up the generic landing page that only printed "It Works!" on a plain white screen to something a bit more interesting when I ran into a an issue with CSS.

Here's the page - it works exactly the way it's supposed to on Chrome, Opera, Safari on both Mac and Win10 (I didn't check Safari on Win10)

On Microsoft Edge, I get this:

What do I need to do in my CSS so that I can correctly position that element?

The code for the page is below

<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; position: relative;
               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">Correctly.</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 Page</a>
</div>

</body>
</html>`

回答1:

<!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.png" style="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>Logo 2</span>
    </div>

</div>
</body>
</html>

try to make it using this code you can read this about using tables vs using divs with display table divs vs tables

来源：https://stackoverflow.com/questions/35442313/css-position-problems-in-microsoft-edge

标签

html5

css3

microsoft-edge