html lineheight div,html – Chrome上的文本输入：line-height似乎有最小值

我想我做到了！

在我的测试中，似乎line-height必须至少约115％的字体大小，所以如果你想50px高元素你必须有〜43px的东西，所有排队：

图1.字体大小为50px线宽的86％。事情排列，但不遵守OP要求的50px字体大小。

input, span {

border: 2px solid red;

display: inline-block;

font: 43px Arial;

line-height: 50px;

padding: 0;

vertical-align: middle;

width: 100px;

outline-style:none;

box-shadow:none;

overflow:hidden;

/* optional - to include the borders in the element size:

box-sizing:border-box;

}

Text

如果你将字体大小增加到所需的50px，那么输入框尊重的最小行高为〜58px。任何尝试用垂直对齐来抵消这种影响在输入中没有影响，但是我们可以修正元素高度并隐藏溢出，以给出一致的(虽然不完全可信的)外观：

图2. 50px文本强制的行高58px，它被截断与溢出隐藏。

input, span {

border: 2px solid red;

display: inline-block;

font: 50px Arial;

line-height: 58px;

padding: 0;

height:50px;

vertical-align: top;

width: 100px;

outline-style:none;

box-shadow:none;

overflow:hidden;

/* optional - to include the borders in the element size:

box-sizing:border-box;

}

Text

关闭，但没有雪茄。但是这让我想到 – 也许一个伪元素可能不那么限制？我发现，你可以风格的输入::第一行伪甚至在一个输入，这将尊重高度，字体大小，行高和垂直对齐！

因此voilà！

图3.第一行伪元素的胜利！

input, span {

border: 2px solid red;

display: inline-block;

font: 50px Arial;

line-height: 50px;

height: 50px;

padding: 0;

vertical-align: middle;

width: 100px;

outline-style:none;

box-shadow:none;

overflow:hidden;

/* optional - to include the borders in the element size:

box-sizing:border-box;

}

input::first-line, span::first-line {

vertical-align: middle;

}

/* weirdly the placeholder goes black so we have to recolour the first-line */

input::-webkit-input-placeholder::first-line {

color:grey;

}

Text

这里有一个jsFiddle的很多，所以你可以看到我的工作。

html lineheight div,html – Chrome上的文本输入：line-height似乎有最小值相关推荐

Adobe AIR移动应用中的文本输入
Adobe AIR移动应用中的文本输入语言:ActionScript 3.0 环境:Adobe AIR for Mobile 作者:@flashache 来自:AIR移动研究小组简介: flash ...
DIV常见任务(上) - 常规任务
作为最常用的布局元素,DIV在Web开发中起着至关重要的作用.这里总结一下我在使用DIV中遇到的各种操作. 1.div显示滚动条这个是很常见的一个任务了,基本是通过CSS去实现滚动条. ( ...
text transform html,html5 – text-transform：uppercase导致Chrome上的布局错误
当内联块嵌套在块元素中时,我遇到了一个奇怪的布局错误,它似乎是由文本转换CSS属性触发的.我在Safari(5.1.2)上也看到了这个问题,但这个最小的测试用例只在Chrome上触发(17.0.963 ...
首次加载页面时，Android Chrome上永远不会触发Touchstart事件
On Android Chrome, when you create a new tab and access to a page with the content below, your touch ...
通过python建立一个web服务查看服务器上的文本、图片、视频等文件
通过python建立一个web服务查看服务器上的文本.图片.视频等文件文章目录: 1 在服务器端开启一个服务 2 在本地浏览器中输入服务器的ip地址 1 在服务器端开启一个服务 python -m ...
修复Chrome上的ERR_TOO_MANY_REDIRECTS错误？
问题:如何修复Google Chrome上的ERR_TOO_MANY_REDIRECTS错误? 我经常在Google Chrome上收到ERR_TOO_MANY_REDIRECTS错误.这困扰了我很多 ...
python 下载网页文件_『如何用python把网页上的文本内容保存下来』python爬取网页内容教程...
python爬虫:如何爬网页数据并将其放在文本用requests库 r=r.requests.get(url) r.concent 保存到文件里就行了如何用python把网页上的文本内容保存下来 ...
新闻上的文本分类：机器学习大乱斗王岳王院长王岳王院长 5 个月前目标从头开始实践中文短文本分类，记录一下实验流程与遇到的坑运用多种机器学习（深度学习 + 传统机器学习）方法比较短文本分类处
新闻上的文本分类:机器学习大乱斗王岳王院长 5 个月前目标从头开始实践中文短文本分类,记录一下实验流程与遇到的坑运用多种机器学习(深度学习 + 传统机器学习)方法比较短文本分类处理过程与结果差 ...
Android 借助Stetho在Chrome上调试Android网络、数据库、Sharedpreferences
Android 借助Stetho在Chrome上调试Android网络.数据库.Sharedpreferences 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/a ...

html lineheight div,html – Chrome上的文本输入：line-height似乎有最小值

html lineheight div,html – Chrome上的文本输入：line-height似乎有最小值相关推荐

最新文章

热门文章