chrome,ff,IE input光标元素不能居中的问题

背景

input css样式:

{
            height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:0px;
            line-height:50px;font-size:14px;.border-left-radius(4px);
        }

可以试一下,chrome中打开会发现光标出现在input元素的左上角。而不是预想中的居中。出现这样的原因如下:

  • IE:不管该行有没有文字,光标高度与font-size一致。
  • FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
  • Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决办法:

将line-height设置为一个比较小的值,垂直方向的居中用padding实现:

{
            height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:16px 0 16px 4px;
            line-height:18px;font-size:14px;.border-left-radius(4px);
        }
时间: 2024-10-05 01:52:45

chrome,ff,IE input光标元素不能居中的问题的相关文章

input光标位置不居中问题

文本输入框默认在谷歌,火狐浏览器中,光标是居中显示的.但在IE7中一开始会在顶部闪烁(输入文字后光标居中),加上行高就可以,值为文本框的高度. 注意要加*号,否则在谷歌浏览其中光标会在顶部闪烁. *line-height: 24px;

input 光标在 chrome下不兼容 解决方案

input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type=text] { width: 304px; height: 52px; line-height: normal; line-height: 52px\9; border: none; color: #FFFFFF; background: url(../images/txt-bg.png) no-r

input光标大小

最近在做项目忘记密码页面时,input光标大小需要统一.同时也需要兼容ie8浏览器. 总结如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font-size一致.该行无文字时,光标高度与input的height一致. Chrome:该行无文字时,光标高度与line-height一致:该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致

input光标位置

兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自动到最后位置 火狐:input框插入文字后,光标在插入文字的后面 兼容:光标在文字的最后面 function moveEnd(obj){ obj.focus(); var len = obj.value.length; if (document.selection) { var sel = obj.

CSS行内元素和块级元素的居中

一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范; 2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高; 3.设置父元素float:lef

css绝对定位元素实现居中的几个方法

一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中   二.绝对定位元素的完全居中实现 如果要问如何CSS实现绝对定

取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: input::-ms-clear { display: none; }

css 行元素和块元素 相互转换 居中

一.块级元素  行内元素 div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 您可以使用 display 属性改变生成的框的类型.这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样.还可以通过把 display 设置为 none,让生成的元素根本没有框.这样的话,该框及其所有内容就不再显

absolute元素,居中

from: zhangxinxu.com 绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } 但,这种方法有一个很明显的不足,就是需要