CSS问题，填写表格时标题会上升

Question

我有一个奇怪的CSS问题，我不太确定如何解决此问题。

当我按下网站上的“登录”按钮并开始输入用户名时，标题就会上升。 我真的不知道是什么原因造成的。

有任何想法吗？

谢谢！

这是一些代码：

表格：

.tooltip-wrap {
  position: fixed;
  display:none;
}

.tooltip-wrap .corner {
    position:relative;
    z-index:100;
    margin-left:-5px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-bottom-color:#fff;
}

.tooltip-text { 
    float:left;
    margin-left:-50%;
    padding:1em 15px;
    background:#fff;
    color:#333;
}

这是上升的部分：

.header-navigation.back {
    z-index:-1;
    position:absolute;
    margin-left:0;
    margin-top:-6px;
    border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}

您需要单击“用户名”并开始输入内容。

Answer 1

更改输入框的line-height -解决此问题。

要更改的HTML：

<input type="text" id="text-user" name="user_login" value="Username" style="
    line-height: 15px;
">

CSS：

#text-user{
    line-height: 15px;
}

原因是因为没有文本的情况下输入的行高比带有文本的情况下要小得多。 因此，当您在框中键入内容时， line-height扩大，这是导致页眉被推高的原因。

编辑

我看到您对代码没有好运，所以再做这两件事，您就可以正常运行了-它正在为我工​​作。

从.site-header删除以下内容：

padding: 2em 0;

接下来，将row样式更改为如下所示：

.row{ 
margin: 0 auto; 
padding: 0 30px; 
width: 1171px; 
height: 137px; 
}

Answer 2

非常奇怪的错误，我无法解释发生了什么。 但这与div.header-navigation.back 。 如果删除它，该行为将消失。

据我所知，您只是在背景图片中使用了该元素，因此将其包含在标记中并不是一个好主意。 如果修改.site-header ，则无需额外的div就可以达到相同的效果：

.site-header {
   background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
   background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
               linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}

我无法完全确定您要使用渐变实现的目标，但其想法是为支持浏览器的那些浏览器提供多种背景，并保留纯色。

Answer 3

我认为解决方案遵循以下原则：

将.header-wrap设置为overflow:visible （好吧，删除隐藏的overflow！）-这意味着您必须将那些字符图形切成平底。

然后，将.tooltip-wrap更改为position:absolute;z-index:2; （不固定）。

我还注意到，您的头中有占位符polyfill。 这意味着您可以在输入而不是值上使用该属性。 像这样：

<input type="text" name="user_login" placeholder="Username">

非常可爱的网站！

Answer 4

您可以给它一个z-index而不是一个固定位置，并给它一个绝对位置。