两个input 文本框并列一起的时候,值有汉字的那个框比值为全部数字的框的位置更低,这是什么bug?怎么解决

我用的浏览器是360和IE8,其他浏览器包括IE6/IE7/chrome等都没这个现象,如图
IE8/360:

傲游/chrome/FF:

另外高度height设置了20px;line-height:20px;这些应该不影响的
注:这两个文本框是放在一个表格的td里面

代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
input,table,tr,td{margin:0;padding:0;border:0}
.input{min-width:188px;max-width:340px;background-color:#f7f7f7;}
.input input[type=text]{height:20px;line-height:20px;}
.input input.codename{width:115px;border:1px solid #39F;background-color:#f7f7f7}
.input input.codeno{width:55px;border:1px solid #39F;background-color:#D7E1F6;}
</style>
</head>
<body>
<table>
<tr>
<td class="input">
<input class="codeno" name="" value="000" readonly style="color:#999"/><input class="codename" name="" value="其他" readonly style="color:#999"/>
</td>
</tr>
</table>
</body>
</html>

第1个回答  2012-12-26
<input class="codeno" name="" value="000" readonly style="color:#999"/><input class="codename" name="" value="其他" readonly style="color:#999"/>

你两个input中的class属性不是同一个,所以肯定是有区别的,只是有写浏览器不区别,有些区别,你把class的值都相同就OK了追问

那当然不同了,不然怎么能一个蓝色一个灰色。。。感觉跟没说一样~

第2个回答  2012-12-26
.input input[type=text]{height:20px;line-height:20px;}这段样式没有起作用,修改成:.input input{height:20px;line-height:20px;}就ok追问

有作用啊,没作用我写上去干嘛,而且问题的重点不是这个啊

追答

主要是一个input值为汉字一个为数字,解决方案为在codename样式添加针对ie8的css属性。
.input input.codename{width:115px;border:1px solid #39F;background-color:#f7f7f7;position:absolute\0;}

追问

追问一下这算是什么BUG~
这也算是解决了,等等加分~

追答

这个BUG主要是一个input值为汉字一个为数字。如果2边同为数字或同为汉字,就不会出现此问题

参考资料:http://www.keyugroup.net/(科雨工作室提供技术指导)

本回答被提问者采纳

如何在网页的input文本框中固定几个特有的字?
可以用两个文本框拼接来实现。一个是输入,一个是固定的(要设置为readOnly),然后设置好css后就看起来像一个文本框了。

在<input type="text">文本框失去焦点的时候,怎么判断文本框的值是否...
1.用js捕捉textbox文本框的blur事件:<input type="text" onblur="..." \/>2.使用Ajax提交到服务器端校验3.收到返回时,根据信息进行相应的提示。

input宽度自适应实现,javascript中width()计算的值偏小,求解
很多时候文本框输入的内容是不固定的,有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些,所以需要设置input的宽度自适应。工具原料:编辑器、jQuery 1、解决宽度自适应的思路是使用jQuery来监听输入事件,进而进行动态的改变input的宽度,实现input宽度自适应的效果。2、首选获取文本的宽度,...

在HTML中同一行的两个文本框怎么隔开
如果是一个在左 一个在右的话你可以把文本框放在这里面<div style="float:left"><\/div> 另外一个用right 如果只是简单的隔开的话 可以用

两个文本框,一个按钮,js怎样判断,点击按钮时,两个文本框都为空,则...
('.Btn').click(function(){ var Txt1 = $('.txt1').val();var Txt2 = $('.txt2').val();if (Txt1 == '' && Txt2 == '') { alert('必须填一个')}else if(Txt1 == '' && Txt2 !== ''){ alert('C')}else if(Txt1 !== '' && Txt2 == ''){ alert('B...

怎么用js实现获得文本框中输入计算公式 然后得到它的值 不要思路要代码...
两个文本框,id为input的文本框内容变化时(onchange)在output文本框中显示getResult方法计算出的结果。可以在input输入 数字*数字+数字*数字+...+数字*数字 这样格式的内容,否则不能正常计算,会在output框中提示错误。<input type="text" id="input" size="100" onchange="document.getElementById...

有默认值的文本框添加新的文字为红色,js如何实现
css设置,color:red,就可以了,使用伪类 input:focus{color:red} js实现就是,监听input的onfocus事件,("input").bind("onfocus",function(){ (this).style("color":"red");});

html里的input文本框怎样单行变多行
多行的就不能使用Input了。需要使用textarea标签属性:textarea代表html的单多行输入域 html多行输入框 tyle="OVERFLOW: hidden"> style="OVERFLOW: visible">始终不显示滚动条,文本区域的大小会根据内容的增加,自动增长,以显示全部内容 <textarea cols="2" rows="6" style="...

html点按钮弹出有文本框的对话框
首先你需要先做个有文本框的对话框,定位到想要显示的位置,然后把他隐藏(display:none),点击相应的按钮让他显示就行了。("botton").click(function(){ $("div").show();})

如何设置html的input框的高度和宽度!
设置html的input框的高度和宽度步骤如下:1、首先用sublime text2新建一个测试用的html页面。2、这个时候在网页中添加以个label标签和一个input框。3、预览一下效果,我们可以知道默认的宽度是10。4、这里我们通过设置size的属性修改一下宽度。5、再预览一下效果。是不是宽度减少了。6、如果是简单改变...

相似回答