placeholder在某些浏览器下不垂直居中问题

最新推荐文章于 2023-04-30 19:25:42 发布

weixin_34309543

最新推荐文章于 2023-04-30 19:25:42 发布

阅读量320

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/chenhuixfyy/1359275

版权

将input的line-height设置为normal即可，让浏览器自己去判断

转载于:https://blog.51cto.com/chenhuixfyy/1359275

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34309543

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
placeholder在某些浏览器下不垂直居中问题

将input的line-height设置为normal即可，让浏览器自己去判断转载于:https://blog.51cto.com/chenhuixfyy/1359275
复制链接

扫一扫

IE8下input光标位置垂直不居中问题

BigOrange的博客

10-20

2679

IE8：光标高度与font-size一致； Chrome：光标高度与font-size一致，且自动垂直居中。如下是IE8的效果，此框是在input上加的border：暂未找到更高级的方法解决此问题，若有更简洁方式，请大神评论指点~ 我的解决方案如下：在input外层加div，div设置height和line-height，input设置高度（高度为font-size的高度加高一点，

解决input标签在ios中光标不居中问题，同时兼容安卓

weixin_42050203的博客

06-22

965

1、首先input的所有父级元素不能加 line-height 属性; 2、初始化input样式 line-height:normal; 3、要想光标不撑满这个input狂，加一个上下边框 4、代码如下，有需要的小伙伴可以试试： Html： <div class="head-search-item"> <input type="text"placeholder="请输入商品/店铺名称"> <div class="icon"> ...

参与评论您还未登录，请先登录后发表或查看评论

placeholder在某些浏览器下不垂直居中问题（Safari）

JaneYork的博客

04-26

1247

贴图： input的提示语placeholder在Chrome正常，在Safari浏览器不垂直居中。解决方式一：将input的line-height设置为normal即可。解决方式二： padding 解决方式三： height: 40px; vertical-align: middle; ...

移动端placeholder不能垂直居中解决方案

asdfgh0077的博客

08-03

200

移动端placeholder不能垂直居中解决方案

针对 IE8 浏览器中 placeholder 错位问题的解决方法

MrLiber的博客

05-15

1205

IE8 浏览器中 placeholder 错位问题的解决方法网上大多数文章给出的方法是通过js或jquery来模拟placeholder的表现。那我通过使用开发者工具，选定了当前的placeholder时，发现其实还有一个span标签。注意：必须先选定页面中的内容，代码中才会显现出这一层标签。此时我们就要快速地定位这层标签的所在位置，然后在你的css文件中把这种情况也加上，注意这是针对IE...

input中的placeholder不能垂直居中的情况

奥里给小饼干

04-30

1395

写移动端页面的时候，顶部的input输入框中的placeholder文字在设置了文字大小之后，不能垂直居中的问题（设置行高无效）在input中设置了。

placeholder里面的文字不居中怎么办

weixin_46787337的博客

11-28

578

这个是字体的问题试试换个字体例如 font-family: PingFang-SC-Regular,system-ui; 另外最好把行高设置成normal line-height: normal;

用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法

09-25

此外，不同的浏览器可能对CSS的解析存在差异，因此在实际应用中，可能还需要针对某些特定的浏览器进行微调或使用前缀来确保兼容性。总的来说，通过理解`vertical-align`属性的工作原理，并巧妙地应用到img、input...

html文本框浏览器页面居中

04-09

可以使用CSS将文本框水平和垂直居中，具体方法如下： 1. 使用以下CSS样式设置文本框的位置和大小： input[type="text"] { position: absolute;...这样就可以实现文本框在浏览器页面中水平和垂直居中的效果了。

上面这个不生效，input设置了height:100px ，placeholder一直显示在中间位置，该如何调

最新发布

07-11

`：将行高设置为默认值，以防止 placeholder 值在垂直方向上居中对齐。 - `transform: translateY(-50%);`：通过将元素向上移动 50% 的高度，使 placeholder 值相对于 input 框顶部对齐。这些样式属性可以帮助你将...

解决移动端input中placeholder无法垂直居中的问题

web_callBack的博客

12-27

9400

在项目中遇到在移动端中placeholder属性无法实现垂直居中的问题，解决方案如下：问题原因：input的placeholder属性由于对于各个浏览器的兼容性不同，在ios浏览器文字靠上，而在andrio浏览器中却文字靠下解决办法：可以使用span标签代替placeholder属性，结合js的方法模拟实现代码如下： HTML代码：咨询服务员后

h5居中loading_h5中实现input的placeholder垂直居中显示

weixin_39608118的博客

12-20

470

设计师在设计input的时候，往往会设计input里面有值和没有值时的字体不一样，比如下图input上图文字大小为72px，下图文字大小为48px，如果仅仅使用input的属性来设置css属性，无法达到设计效果，会出现placeholder文字偏下的问题，如下图：fact为了实现placeholder文字居中又不影响input输入文字的UI效果，于是，我给input的placeholder设置为空...

placeholder垂直居中（解决光标居中、文字不居中问题）

半个橙子的博客

05-04

1万+

placeholder垂直居中 解决只有光标居中，文字不居中问题。

解决input的placeholder不垂直居中问题

qq_38136543的博客

09-09

4506

解决input的placeholder不垂直居中 将input的line-height改为normal line-height:normal

input的placeholder上下不居中

zhaoyahui的博客

03-10

1482

input::-webkit-input-placeholder { line-height:normal; } 亲测有效

input框的placeholder使用line-height在Safari上不垂直居中的问题

夏天的甲虫

07-29

1万+

测试中出现的问题，Safari5.1.7 input文本框有placeholder值时，css样式设置 line-heigh t与 heigh t等高，并不能使提示文本垂直居中，如下： width: 450px; height: 40px; line-height: 40px;解决方案一：使用padding使提示文字居中，

layui表单居中