0

我有一个奇怪的 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');
}

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

4

4 回答 4

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; 
}
于 2013-04-16T01:51:12.210 回答
1

非常奇怪的错误，我无法解释发生了什么。但这与您的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%);
}

我无法完全弄清楚你想用渐变实现什么，但我的想法是为那些支持它们的浏览器提供多个背景，并回退到纯色。

于 2013-04-16T13:57:45.153 回答
0

我认为解决方案是这样的：

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

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

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

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

很可爱的网站！

于 2013-04-16T02:16:01.117 回答
0

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

于 2013-04-16T13:49:14.587 回答