Microsoft Edge中的CSS位置问题

sdnqo3pr 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(145)

我绝不是一个web开发人员，我更关注基础设施方面的事情。无论如何，我在XServe G4上构建了一个带有AMP堆栈的FreeBSD服务器，并希望将仅在纯白色屏幕上打印“It Works！”的通用着陆页打扮成更有趣的东西，当我遇到CSS问题时。
这是页面-它的工作方式完全应该在Chrome，Opera，Safari在Mac和Win10（我没有检查Safari在Win10）

在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; 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>`

css

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

1条答案

按热度按时间

hk8txs481#

<!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>

试着用这段代码你可以读到这段关于使用表格vs使用div显示表格divs vs tables

赞(0）回复(0）举报 2023-04-08

我来回答

Microsoft Edge中的CSS位置问题

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

1条答案

相关问题

热门标签

最新问答