Microsoft Edge中的CSS位置问题 [英] CSS Position Problems in Microsoft Edge
问题描述
我绝不是一个网络开发者，我更多的是基础设施方面的事情。无论如何，我在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>
尝试使用此代码
您可以阅读有关使用表vs使用带有显示表的divs
divs vs表
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>`
<!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
这篇关于Microsoft Edge中的CSS位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
