2
這是我的第一篇文章，我已經離開了HTML和CSS很長一段時間，所以請原諒我，如果這是一個明顯的問題，或者如果我的代碼混亂或不一致。我必須在我正在處理的頁面中查找此日誌的部分不同解決方案。表格在Firefox和IE中完全消失
我的問題是，雖然此頁面在Chrome和Opera，Firefox和Internet Explorer中均正常工作，但鏈接和按鈕消失之前的所有內容都會停留在頁面頂部。
你能幫我解釋爲什麼這可能是？
需要特殊字符，因爲這將是瑞典語。
HTML：
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="logindiv">
<img src="AAA.png" style="width: 80px; height: 80px;"/>
<img src="BBB.jpg" style="width: 80px; height: 80px;"/>
<h1>Välkommen</h1>
<br/><br/><br/><br/>
<div id="logindiv">
<table>
<tr>
<td></td>
</tr>
<tr>
<td><img src="user.png"/></td>
<td><input type="text" value="användarnamn" name="username" id="user" style="color: #BCC8CC; text-align: center; font-family: 'jaapokki-regular', Helvetica, sans-serif;"
onblur="if (this.value == '') {this.value = 'användarnamn';} this.style.color='#BCC8CC';"
onfocus="if (this.value == 'användarnamn') {this.value = '';} this.style.color='#606060';" /></td>
</tr>
<tr>
<td><img src="password.png"></td>
<td><input type="password" value="lösenord" name="pwd" id="pwd" style="color: #BCC8CC; text-align: center; font-family: 'jaapokki-regular', Helvetica, sans-serif;"
onblur="if (this.value == '') {this.value = 'lösenord';} this.style.color='#BCC8CC';"
onfocus="if (this.value == 'lösenord') {this.value = '';} this.style.color='#606060';" /></td>
</tr>
</table>
<p><a href="password.html">Har du glömt ditt lösenord?</a></p>
<table>
<tr>
<td></td>
<td id="login"><a href="cases.html"><input type="button" name="btn" class="btn-style" value="LOGGA IN"/></a></td>
</tr>
</table>
<p></p>
</div>
</div>
</body>
</html>
CSS：
@font-face {
font-family: 'jaapokki-regular';
src: url('jaapokki-regular.eot');
src: url('jaapokki-regular.eot?#iefix') format('embedded-opentype'),
url('jaapokki-regular.woff') format('woff'),
url('jaapokki-regular.ttf') format('truetype'),
url('jaapokki-regular.svg#jaapokki-regular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
color: #6e8196;
text-decoration: none;
}
body {
background-color: #FFFEF5;
color: #606060;
font-family: "jaapokki-regular", Helvetica, sans-serif;
}
h1 {
font-family: "jaapokki-regular", Helvetica, sans-serif;
text-align: center;
color: #606060;
}
div#logindiv {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
table {
width: 220px;
position: relative;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: "jaapokki-regular", Helvetica, sans-serif;
}
td {
height: 50px;
vertical-align: middle;
}
td#login {
height: 80px;
vertical-align: middle;
}
.user-style{
color: #606060;
}
.btn-style{
border : solid 1px #606060;
font-size : 17px;
color : #fffef5;
padding : 4px 12px;
background-color : #6e8196;
font-family: "jaapokki-regular", Helvetica, sans-serif;
}
我不確定你是否理解職位的目的：相對於我認爲你想要做的事情....如果你想要集中的東西，嘗試使用'margin：0 auto;' – briansol 2014-10-20 21:14:13
我想你可以檢查CSS轉換的瀏覽器兼容性。 http://www.w3schools.com/cssref/css3_pr_transform.asp – 2014-10-20 21:15:03
你是對的@briansol;我不明白它的許多事情，因爲正如我所說的，我只能在長期缺席之後重新開始寫腳本。感謝您的建議，我會檢查出來。 – 2014-10-20 21:19:51