Question

问题在于：我尝试通过放置两个＆＃34; p＆＃34;来创建一个页面。使用display在同一行上对齐的元素：＆＃34; p＆＃34;中的内联块和浮动的最后一个孩子：对。代码在Chrome中运行良好但是当我在Edge中尝试它时，我注意到一个小问题：页脚不在页面底部，但是会创建一个至少为1px的空白区域。

Google Chrome中的网页浏览量：https://i.stack.imgur.com/qfCkl.png

Microsoft Edge中的页面视图：https://i.stack.imgur.com/bFHz1.png

但如果我将身体的背景颜色更改为与页脚相同的边距，那么＃34;就会消失＆＃34;。

问题是我不想改变身体的颜色，也不想使用position：absolute来放下页脚，因为我试图以这种方式修复它并且它有效但我不想使用该属性。我不知道它是否是Edge显示问题，或者你们可以告诉我代码是否错误。这是代码：

~ git:(master) ✗

这就是CSS：

<html>
    <body>
        <div class="wrapper">
            <div class="content">
                <!-- content of the page -->
            </div>
        </div>

        <footer>
            <div class="copyright">
                <p>Footer text</p>
                <p>More Footer text</p>
            </div>
        </footer>
    </body>
</html>

Answer 1

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: Sans-Serif;
}

.wrapper, footer {
    width: 100%;
}

.content {
    margin: 0 auto;
    height: 1000px;
    width: 90%;
}

footer {
    background-color: #333;
}

.copyright {
    padding: 20px;
}

.copyright p {
    color: #fff;
    display: inline-block;
  vertical-align: middle;
    padding: 0px 20px;
}

.copyright p:last-child {
    float: right;
}

        <div class="wrapper">
            <div class="content">
                <!-- content of the page -->
            </div>
        </div>

        <footer>
            <div class="copyright">
                <p>Footer text</p>
                <p>More Footer text</p>
            </div>
        </footer>

请将vertical-align: middle;添加到.copyright p

在Microsoft Edge中使用内联块显示问题

1 个答案: