html - 在 Microsoft Edge 开发人员工具中看不到页脚(仅限某些设备)

标签 html css responsive-design

我的网站上有一个页脚标签,由于某种原因,它在大量移动设备上不可见,或部分不可见。 (我通过使用浏览器的开发人员工具知道这一点),它可以被拉入查看,但它不会留在视野中,它会再次被拉下。
我实现的 CSS 可能会导致这种情况,但我需要它以使页脚在所有情况下都位于页面底部。 (如 this question 中所述)
这基本上是我的页脚的代码:

html {
  height: 100%;
}

main {
  padding-right: 200px;
  padding-left: 200px;
  background-color: white;
  flex: 1 0;
}

body {
  background-color: #80cbc4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  text-align: center;
  background-color: #d9efef;
  height: auto;
  flex: 0 0;
}
<html>

<body>
  <main>
    page content
  </main>
  <footer>
    <p style="direction:rtl;">
      רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. <a href="http://cs.haifa.ac.il/~shuly/publications/lre4h.pdf">"Language Resources for Hebrew."</a> Language Resources and Evaluation 42(1):75-98,
      March 2008. [<a href="https://yeda.cs.technion.ac.il/files/citations/bibtex/hebrew-resources.txt">BibTeX</a>]
    </p>
  </footer>
</body>

</html>

这个问题发生在这些设备上(正如我浏览器的开发者工具所模拟的那样):
  • 像素 2/2 XL
  • Kindle fire HDX(连页脚都拉不进去查看)
  • iPhone X/6/7/8 Plus
  • iPad/iPad Mini/iPad Pro
  • Surface Duo
  • 黑莓手册
  • Nexus 6/6P/7/10
  • 诺基亚 N9

  • 而不是其他(例如桌面),这意味着上面的代码可能不会向其他用户显示问题。
    笔记:
    我一直在检查我的开发工具中的所有选项,这意味着我在上面的列表中还包含了一些不常见的设备。
    还,

    Realize that the emulator does not provide the same experience as a person with an actual Pixel 2 XL device would have. They may have the same resolution, but other behaviors may, and probably will, differ. – Heretic Monkey


    这意味着这可能只发生在我的模拟器中。
    这是问题的样子:
    what the footer looks like
    如何让我的页脚重新进入以在所有设备上查看?

    最佳答案

    这应该有帮助:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    如果没有,它可能只是在视野之外。将页脚样式设置为始终可见,但仍位于最底部:
    footer {
         bottom: 0;
         }
    

    关于html - 在 Microsoft Edge 开发人员工具中看不到页脚(仅限某些设备),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67659712/

    相关文章:

    javascript - 子元素移动基线

    javascript - 另一个栏上的下拉导航

    javascript - 无法将刻度线与条形图中的条形对齐

    html - CSS 中的响应图像

    html - 垂直图像调整大小。 (Flex 或 VH)

    html - 图像的马赛克 HTML/CSS

    javascript - 将 HTML 文本放在特定位置但在同一行

    jquery - 使用 JQuery 单击图像以更改 DIV 中背景的位置

    html - 菜单(链接)在错误页面上不起作用...?

    html - 移动到 HTML 页面上的特定部分