当前位置：文江博客话题详情

CSS：空输入与带内容的输入具有不同的行高？

发布于 2024-10-04 04:57:49 字数 216 浏览 5 评论 0原文

这并不是某个网站的具体问题，而是我在每个项目中都注意到的问题。

如果您查看此处。在输入内部单击，插入符号将拉伸到输入的高度。现在按一个键，插入符号会缩小到文本高度。有谁：

a）知道为什么会发生这种情况

b）知道如何解决它？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风轻花落早 2024-10-11 04:57:49

我不知道这是否值得，但如果你坚持在 Firefox 中解决这个问题，你可以这样做：

在焦点事件上，如果文本框的值为空字符串，则：

将值设置为" " （空格字符）
将插入符号移动到文本框的开头

工作演示：http://jsfiddle.net/U2TPK/11/

我正在使用自定义脚本来设置选择。它位于此处：http://vidasp.net/js/selection.js
selec.set(this, 0, 0) 将插入符号设置为文本框的开头。

$("input:text").focus(function() {
    if ( this.value.length === 0 ) {
        this.value = " ";
        selec.set(this, 0, 0);
    }
});

更新：http://jsfiddle.net/U2TPK/12/
（这也可以处理用户重复聚焦空文本框时的情况）

I don't know if it's worth it, but if you insist on fixing this issue in Firefox, you could do this:

On the focus event, if the value of the text-box is an empty string, then:

set the value to " " (a space character)
move the caret to the beginning of the text-box

Working demo: http://jsfiddle.net/U2TPK/11/

I am using a custom script to set the selection. It is located here: http://vidasp.net/js/selection.js
selec.set(this, 0, 0) will set the caret to the beginning of the text-box.

$("input:text").focus(function() {
    if ( this.value.length === 0 ) {
        this.value = " ";
        selec.set(this, 0, 0);
    }
});

Update: http://jsfiddle.net/U2TPK/12/
(this also handles the situation when the user repeatedly focuses the empty text-box)

回复收藏 0 原文

熊抱啵儿 2024-10-11 04:57:49

为选项设置固定高度为我修复了它。

option
{
    height: 12px;
}

setting a fixed height for option fixed it for me.

option
{
    height: 12px;
}

回复收藏 0 原文

街角迷惘 2024-10-11 04:57:49

从我的角度来看，问题很简单，输入中的字体大小小于实际输入大小，因此如果将字体设置为所需的大小，应该可以解决此问题：

input {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 20px;
    width: 200px;
    font-size:20px;
}

或者您可以使用：

input {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 15px;
    width: 200px;
    line-height:20px;
}

From my point of view the problem is simple, the font-size inside the input is smaller than the actual input size so this should fix it, if you set the font to the desired size:

input {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 20px;
    width: 200px;
    font-size:20px;
}

or you could use:

input {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 15px;
    width: 200px;
    line-height:20px;
}

回复收藏 0 原文

~没有更多了~