输入类型密码会破坏Chrome和Opera中的布局

Question

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

我已经在validator.w3.org上检查了我的网站，遗憾的是没有关闭元素或其他任何错误：（

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

click here to see it in action

Answer 1

差异出现在Chrome中，因为您在float元素p元素上使用了header属性，并且您没有清除浮动。

检查以下HTML代码，并在课程overflow:hidden上使用page-header。

<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 tag.

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