chrome下input[type=text]的placeholder不垂直居中的问题解决 调试通过

最新推荐文章于 2023-09-14 21:58:10 发布
原创 最新推荐文章于 2023-09-14 21:58:10 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在不同浏览器环境下实现一致行高显示的方法，通过使用normal及特定IE hack技巧，确保了跨浏览器的兼容性和统一性。 
line-height: normal; /* for non-ie */  
line-height: 22px\9; /* for ie */

uniapp-扩展小常识
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
01-01 1870
uniapp-扩展小常识，Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者可以使用Vue.js的语法和开发体验，编写一套代码，同时将其编译为多个平台的应用，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等。这种跨平台开发的能力极大地节省了开发成本和时间，提高了开发效率，为开发者带来了诸多便利。
解决input的placeholder不垂直居中问题
qq_38136543的博客
09-09 4936
解决input的placeholder不垂直居中 将input的line-height改为normal line-height:normal
关于Chrome 浏览器 input输入框 当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法
砚之
08-04 1907
关于Chrome 浏览器 input输入框 当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法遇到的困难，以及解决办法 遇到的困难，以及解决办法  1. chrome 的placeholder不垂直居中的问题 原因：这是chrome的一个bug，当placeholder的字体大小与本身要输入的字体大小不一致时，此时chrome的pl...
chrome placeholder导致输入光标不居中
咸鱼的星空
11-05 2021
但是在chrome下显示的search word并不能垂直居中。 后来找了很久终于在stackoverflow上找到了对应的方法。 参考：http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding 就是一句：把line-height设置为normal line-he
浏览器原生placeholder样式修改
weixin_33910434的博客
04-29 361
浏览器（chrome）原生placeholder样式：修改如下：input::placeholder { color: red; font-weight: bold; font-size: 22px; }复制代码浏览器兼容性写法忽略，不要把有限的生命浪费在浏览器兼容上:)...
关于布局中垂直居中，踩过的坑（解决了，但是还是稀里糊涂的）
weixin_40098371的博客
04-19 399
昨天拿了一个页面练手，刚写了三行，碰见一垂直居中问题。没有问题的代码截图如下：html:css:html,body,div,ul,li,span,img,input{ padding: 0; margin: 0; font-size: 72px;     box-sizing:border-box; } div{ display: inline-block; } #wrapper{    ...
IE8下input光标位置垂直不居中问题
BigOrange的博客
10-20 2765
IE8：光标高度与font-size一致； Chrome：光标高度与font-size一致，且自动垂直居中。 如下是IE8的效果，此框是在input上加的border： 暂未找到更高级的方法解决此问题，若有更简洁方式，请大神评论指点~ 我的解决方案如下： 在input外层加div，div设置height和line-height，input设置高度（高度为font-size的高度加高一点，
input中的文字取消垂直居中
04-24
要让文字不垂直居中，可能的解决方法包括调整line-height、padding，或者使用vertical-align属性。但要注意，input元素本身对于这些属性的支持情况。例如，vertical-align在input元素上可能表现不同，或者需要配合...
ut-textinput input::-webkit-input-placeholder {/* 修改提示placeholder的样式 */
10-01
在CSS中，`ut-textinput input::-webkit-input-placeholder` 这行代码是用来针对Webkit内核浏览器（如Chrome、Safari等）定制输入框（`input`元素）在用户还未开始输入时显示的默认文本提示（即placeholder）。...
input中placeholder字体颜色怎么修改
最新发布
08-06
<input type="text" class="my-input" placeholder="这个占位符是蓝色的"> ``` 这样，只有具有`my-input`类的输入框的占位符文本颜色会变成蓝色。 总结：修改HTML input元素中placeholder文字的颜色，主要使用...
input 的 placeholder 样式
huangpb的博客
09-14 3291
这个伪元素可以改变 input、textarea 占位文本的样式。
chrome调试技巧
EmotionComputer
10-04 7389
打开 Chrome 开发者工具 在 Chrome 菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查” 使用 快捷键 F12或Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac) 了解面板 元素面板 控制台面板 源代码面板 网络面板 性能面板 内存面板 应用面板 安全面板 1. 元素面板 使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。 检查和调整页面 编辑样式 编辑 DOM 2.控制台面板 在开发期
Chrome下面查看placeholder的样式
weixin_30657999的博客
08-24 3659
在Chrome下面默认是看不到placeholder的样式的 我们可以通过在当前页面的开发者工具里面的settings 勾选下面这个选项，就可以看到了 下面是效果 转载于:https://www.cnblogs.com/ppxyq/p/9530527.html...
【css】input文本框光标垂直不居中
夕雨林流金,web全栈,web全端,网站技术博客
04-13 2136
设置样式：line-height:32px\9; 有人说safari不兼容加这个： @media screen and (-webkit-min-device-pixel-ratio:0){ input{ line-height:50%; } } 来源：http://tinycss.blog.163.com/blog/static/200020315201262093239625/
placeholder垂直居中（解决光标居中、文字不居中问题）
半个橙子的博客
05-04 1万+
placeholder垂直居中 解决只有光标居中，文字不居中问题。
css3 placeholder中含有文字和字符，字符如何在input中垂直居中
wanglufei_1992的博客
05-13 2045
有这个一个小功能 星号垂直居中。这是最后要呈现的效果。">``` 如果只是单纯让这样写，它会是这样的效果： ![这里写图片描述](http://img.blog.youkuaiyun.com/20160513102416971) 这时候只需要加上 font-family: sans-serif; “` 然后，就可以了。
解决移动端input中placeholder无法垂直居中的问题
web_callBack的博客
12-27 9516
在项目中遇到在移动端中placeholder属性无法实现垂直居中的问题，解决方案如下： 问题原因：input的placeholder属性由于对于各个浏览器的兼容性不同，在ios浏览器文字靠上，而在andrio浏览器中却文字靠下 解决办法：可以使用span标签代替placeholder属性，结合js的方法模拟实现 代码如下： HTML代码： 咨询服务员后
chrome input 光标垂直居中问题
ISaiSai的专栏
12-23 6053
chrome 下设置较高的input 的时候，光标不会居中（即使设置了相同的height 和line-height） 解决方法：部分高度使用 相同   padding-top 和padding-bottom 代替                     .heightTest {             padding: 10px 0px;
input 标签placeholder文字居中
热门推荐
xqq580231的博客
12-27 2万+
input::-ms-input-placeholder{ text-align: center; } input::-webkit-input-placeholder{ text-align: center; }
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chaojie2009

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值