ie8浏览器下，input框中的文字显示的位置不居中，解决方法

最新推荐文章于 2022-05-13 17:12:04 发布
最新推荐文章于 2022-05-13 17:12:04 发布
阅读量4.9k 收藏 1
点赞数
分类专栏： 经验积累 文章标签： ie8 input 样式显示不正确 DOCTYPE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whx_0408/article/details/15815141
版权

题目描述的现象如下

input框的位置为蓝色区域（附件：input框区域.jpg）

但是在IE8中显示光标的位置（附件：向上.jpg）

明显偏上，

解决该问题的方法是去掉关于html文档类型的声明

去掉我<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

去掉后显示的效果（附件：居中的效果图.jpg）

可以正常居中显示

这个修正主要适用于需要input框后面有背景等。

目前不知道为什么这么修改可以解决这个问题，如果有哪位大神了解机制，请多多指教哈。




sunny_runny
关注
专栏目录
IE8下input光标位置垂直不居中问题
BigOrange的博客
10-20 2680
IE8：光标高度与font-size一致； Chrome：光标高度与font-size一致，且自动垂直居中。 如下是IE8的效果，此框是在input上加的border： 暂未找到更高级的方法解决此问题，若有更简洁方式，请大神评论指点~ 我的解决方案如下： 在input外层加div，div设置height和line-height，input设置高度（高度为font-size的高度加高一点，
jsp文字上下居中显示_表单元素input、按钮、文字完美垂直居中对齐方法
weixin_28745067的博客
12-30 5084
本文最终总结出来办法就是要对齐的表单内容(含文字、图片、表单各种元素、label)字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)，其中个别的input元素如radio的padding和margin设置为0，即可完美解决表单元素input等对齐问题。最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选...
Firefox下input button内文字不能垂直居中的解决方法
09-25
在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己弄了个私有属性，解决方法很简单，遇到类似问题的朋友可以学习下，希望可以帮助到大家
IE文本框 文字居中
xueerfei的专栏
07-07 3305
参考：http://bbs.blueidea.com/thread-3033907-1-1.html
input输入内容只显示一半
Hero_rong的博客
08-26 5905
输入的内容没有全部显示，感觉就像是有padding-right属性似的，其实并没有 解决办法 给input设置 min-width: 78%;或者 max-width: 78%;
input 文本框 文字垂直居中对齐 ie firefox
12-03
浏览器支持 所有浏览器都支持 line-... 解决这个问题可以用pading设置上下填充，但是如果文本框有背景图片的话就会向下凸出一块，此时可以把max-height值设为height的值。 但为什么会出现不居中，实在是搞不明白。
chrome、firefox、IE中input输入光标位置错位解决方案
09-22
本文主要探讨的是在Chrome、Firefox和IE浏览器中，`<input>` 输入框内光标位置出现错位的问题及其解决方案。 问题的起因在于开发者通常会为了美观或者功能需求，使用背景图片来模拟`<input>`输入框的样式，并通过...
input输入框中的光标大小显示不一致的解决方法
12-13
input输入框中的光标大小显示不一致 ie7中和chrome的非常明显 先看看问题产生的原因：chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到...
IE8 input框内容上下居中
hzf535145771的博客
09-11 1834
input框内加两个样式，line-htight,height设置为一致。
input输入框光标上下居中兼容问题
anzuaifangcheng的博客
12-25 889
input输入框光标上下居中兼容问题 转载chise0319 发布于2017-03-06 10:58:00 阅读数 28 收藏 展开 input高度40px,行高line-height:40px;这样写在safari下失效，safari下光标占满标签。 所以上网查了一下，找到了解决办法。 就是用padding撑高。见下图 输入图片说明输入图片说明 ...
input框文字不垂直居中解决方案
南北极之间
05-13 2459
input框文字不垂直居中解决方案
ie8 input 文字偏上/偏下问题
进击的WEB前端-小黄毛
11-27 8234
ie8 input 文字偏上/偏下问题
解决Button无法居中显示字符，特别是Webdings这类图形字符
norsd的专栏
10-31 677
Reference： https://stackoverflow.com/questions/17469159/centering-text-on-a-buttonbtnUp.Text = "▲"; btnDown.Text = "▼"; btnUp.TextAlign = ContentAlignment.MiddleCenter; btnDown.TextAlign = ContentAlign
input文字垂直居中和按钮对齐问题，兼容IE8
06-14 467
1、盒子模型问题：请CSS重置 2、按钮不对齐：请浮动或者vertical-align:middle;然后计算宽高，使其对齐 ； 3、IE8文本不居中：line-height属性 注意：IE8不支持font写法（或者某个样式不支持） IE浏览器测试到IE8，IE5、6、7慎用。 问题原因：盒子模型 1、盒子模型： 在页面放2个input，一个text文本框，一个but...
解决IE 不居中问题
web
12-02 3249
New Document body { font-size: 14px; text-indent: 40px; line-height: 30px; margin: 0 0 ; padding: 0 0; } #left { width: 100%; background-color: #D7E7F7; margin:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值