Question

这是我的第一篇文章，我已经离开HTML和CSS很长一段时间了，所以如果这是一个明显的问题，或者如果我的代码混乱或不一致，请原谅我。我必须在我正在处理的页面中查找不同的解决方案。

我的问题是，虽然这个页面在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&auml;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&auml;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&auml;ndarnamn';} this.style.color='#BCC8CC';"
              onfocus="if (this.value == 'anv&auml;ndarnamn') {this.value = '';} this.style.color='#606060';" /></td>
          </tr>
          <tr>
            <td><img src="password.png"></td>
            <td><input type="password" value="l&ouml;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&ouml;senord';} this.style.color='#BCC8CC';"
              onfocus="if (this.value == 'l&ouml;senord') {this.value = '';} this.style.color='#606060';" /></td>
            </tr>
        </table>

        <p><a href="password.html">Har du gl&ouml;mt ditt l&ouml;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;

}

Answer 1

有一条规则可以让整个表格离开屏幕。

div#logindiv {
  transform: translateY(-50%);
}

没有它的结果：

@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;

}

<div id="logindiv">
      <img src="AAA.png" style="width: 80px; height: 80px;"/>
      <img src="BBB.jpg" style="width: 80px; height: 80px;"/>

      <h1>V&auml;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&auml;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&auml;ndarnamn';} this.style.color='#BCC8CC';"
              onfocus="if (this.value == 'anv&auml;ndarnamn') {this.value = '';} this.style.color='#606060';" /></td>
          </tr>
          <tr>
            <td><img src="password.png"></td>
            <td><input type="password" value="l&ouml;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&ouml;senord';} this.style.color='#BCC8CC';"
              onfocus="if (this.value == 'l&ouml;senord') {this.value = '';} this.style.color='#606060';" /></td>
            </tr>
        </table>

        <p><a href="password.html">Har du gl&ouml;mt ditt l&ouml;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>

Answer 2

事实证明，完全取消变革更好。而不是它，我用这些小部分来集中我的div和table：

div {
  position:absolute;
  top:25%;
  left:25%;
  right:25%;
}

table#login {
  width: 220px;
  margin: 0 auto;
  text-align: center;
  font-family: "jaapokki-regular", Helvetica, sans-serif;
}

table {
  margin: 0 auto;
  text-align: center;
}

感谢大家的帮助。

表在Firefox和IE中完全消失

2 个答案: