所以我刚刚使用 HTML5 和 CSS3 编码制作了我的网站，当我在 chrome 上查看网站时(在整个创建过程中我用来测试我的网站的浏览器)，会徽图像正好出现在我想要的位置。但是，当我在 Internet Explorer 中查看我的网站时，该图像被替换了(不是我想要的位置)。我试过弄乱绝对、固定和相对位置，但似乎没有任何效果。一切，但那一张图片在两个浏览器上都已就位。我想让它尽我所能在所有浏览器上运行。有人可以帮助我吗:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Websites</title>
<style type="text/css">
#top, #bottom, #left, #right {
background: #000015;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 50px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 50px;
}
#top { top: 0; }
#bottom { bottom: 0; }
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
z-index:100;
padding: 0px;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
}
.center{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomright{
position: fixed;
bottom:-2%;
right:0.5%
}
a {
color:#00003D;
text-decoration:none
}
a:hover {
color: orange;
font-size: 105%;
}
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid;
border-left: 5px solid ;
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
animation: spinPulse 1s infinite linear;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid;
border-right: 5px solid;
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 10px;
height: 10px;
margin: 0 auto;
position: relative;
top: -30px;
animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
@keyframes spinPulse {
0% {
transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
transform: rotate(145deg);
opacity: 1;
}
100% {
transform: rotate(-320deg);
opacity: 0;
}
}
@keyframes spinoffPulse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
}
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
img.growturn {
transition: width 2s, height 2s, transform 2s;
}
img.growturn:hover {
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body style="background:url(webdata/images/index/background.png) no-repeat; background-attachment: fixed; background-size:100% 100%;">
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div class="center">
<table class="button">
<tr>
<td colspan="4">
/*this image (emblem.png) is the one causing problems*/
<img class="growturn" src="webdata/images/index/emblem.png" alt="" height="45" width="45" style="position: fixed; left:28%; top:6%">
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 15pt; color: white;">PROJECT <strong>COSC</strong>2206</p>
</td>
</tr>
<tr>
<td colspan="4" style="font-family:Geneva, 'Book Antiqua', Palatino, serif; font-size: 40pt; color: orange">WELCOME TO MY WEBSITE</td>
</tr>
<tr>
<td colspan="4" style="font-family:Helvetica, sans-serif; font-size: 9pt; color:#C2F0FF; letter-spacing: 1px; padding: 20px">Welcome to Project COSC2206. All assignments can be viewed below once they become available or simply return to the iTool's.</td>
</tr>
<tr>
<td style="background-color:#00CCFF;"><a href="#">tools</a></td>
<td style="background-color:#00CCFF;"><a href="classified.html">Assignment 2</a></td>
<td style="background-color:#00CCFF;"><a href="classified.html">Assignment 3</a></td>
<td style="background-color:#00CCFF;"><a href="classified.html">Assignment 4</a></td>
</tr>
</table>
</div>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcoscvm23.cs.laurentian.ca%2F;outline=1" target="_blank">
<img src="webdata/images/index/HTML5_Badge.png" alt="" width="28" height="27" style="position: absolute; float: left; left: 7px; bottom: 5px;">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
<img src="webdata/images/index/CSS3.png" alt="" width="31" height="31" style="position: absolute; float: left; left: 35px; bottom: 2px;">
</a>
<div class="bottomright">
<div class="circle"></div>
<div class="circle1"></div>
</div>
</body>
</html>
最佳答案
我没有看到任何问题。我检查了三个浏览器，chrome、firefox 和 internet explorer。然而，这个问题可能是由于浏览器的 css。您应该在 CSS position 属性的末尾使用 !important 第二件事是尝试减少 top left 的百分比 slighthlty 以便它不会因为余量很小而错位。
关于html - 使用 html5 和 css 为所有浏览器定位图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27973299/