css - 输入类型密码破坏了 Chrome 和 Opera 中的布局

Question

在客户端布局中使用 input type password 时会发生一件奇怪的事情。在 Mac 上的 Chrome 和 Opera 上，它完全破坏了我的布局。当我更改为 input type email 时，布局很好。在所有其他浏览器中，它按预期工作。

我已经在 validator.w3.org 上检查了我的站点，不幸的是没有错误，例如没有关闭元素或其他任何错误:(

要查看输入字段，您必须单击黑色顶部导航栏中的“登录”。

click here to see it in action

Answer 1

差异出现在 chrome 中，因为您在 header 元素内的 p 元素上使用 float 属性并且您没有清除 float .

检查下面的 HTML 代码并在类 page-header 上使用 overflow:hidden。

<header class="page-header">
<a title="Zur Homepage" href="index.html">Maximilian.it</a>
<p>Passion for fashion</p>
</header>

检查 CSS 代码。

.page-header {
margin-top: 15px;
margin-bottom: 15px;
border-bottom: none;
overflow: hidden; /*Added New line*/
}

更新的答案

让我们尝试将 position:relative 放在类 .page-header 上，然后将 position:absolute 赋给 p 标签。

.page-header {
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: none;
    position: relative; /*Added New line*/
    }

.page-header p
{
float: right !important; /*Remove this line*/
position: absolute;
right: 0;
top: 35px;
}