首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

在ie下的兼容性有关问题,<input>的显示

2013-09-04 
在ie下的兼容性问题,input的显示【求助】关于兼容性问题,在mac下的safari跟chrome都没有问题,win下的chrom

在ie下的兼容性问题,<input>的显示【求助】
关于兼容性问题,在mac下的safari跟chrome都没有问题,win下的chrome也基本没问题,就是在ie下面有问题。
那四个输入框始终不能正常显示(一横排显示),希望大家帮我看看应该调试哪里呢?
弄了一下午了,头好晕……初学html让大家见笑了
在ie下的兼容性有关问题,<input>的显示

<style type="text/css">
  #check{float: left;width:937px;height:216px;background: url(http://9.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130820/43261c5032b9b263.png) no-repeat;border:none;
    margin: auto;
    position:absolute;

  }
  #checkinput{float:left;border:none;width:352px;height:26px;color:#333333;font-size:12px;padding-top: 69px;padding-left: 585px;}
  #checkbutton1{display:block;width:60px;height: 20px;margin-left: 160px;margin-top:11px;border:none;background:url(http://3.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130820/2e42b9d8c50683f8.png);cursor:pointer;position:absolute;}
  #checkbutton2{display: block;margin-left:231px;margin-top:11px;width:60px;height:20px;border: none;background: url(http://4.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130820/b28c3bf9da9414c4.png);cursor: pointer;margin-top: 11px;position:absolute;}
  input {border: #006837 1px solid; border-top: #006837 1px solid; font-size: 14px; border-left: #006837 1px solid; border-bottom: #006837 1px solid; font-family:"宋体","Verdana"; background: #ffffff;text-align: center;
}
</style>
<script language="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
function fwm1_onkeyup() {
if (document.formQuery.fwm1.value.length == 4) {
document.formQuery.fwm2.focus();
}
}
function fwm2_onkeyup() {
if (document.formQuery.fwm2.value.length == 4) {
document.formQuery.fwm3.focus();
}
}
function fwm3_onkeyup() {
if (document.formQuery.fwm3.value.length == 4) {
document.formQuery.fwm4.focus();
}
}
//-->
</script>

<div style="width:960px;height:216px;margin:auto;">
<div id="check">
<div id="checkinput"> 
<form  name="formQuery" method="post" action="http://www.88315.org/chinese/checkFWM.asp">

<input type="text" language=javascript onkeyup="return fwm1_onkeyup()" maxLength=4 size=4
name=fwm1>
-
<input type="text" language=javascript onKeyUp="return fwm2_onkeyup()" maxLength=4 size=4
name=fwm2>


-
<input type="text" language=javascript onKeyUp="return fwm3_onkeyup()" maxLength=4 size=4
name=fwm3>
-
<input type="text" maxLength=4 size=4 name=fwm4 >
<input id="checkbutton1" type="submit"  value=""  onClick="javascript:fsubmit(document.formQuery);" >
<input id="checkbutton2" type="button" value="" onClick="javascript:freset(document.formQuery);" >
</form>
</div>
<SCRIPT language=VBscript src="focus.js"></SCRIPT>
</div>
</div>


[解决办法]
你如果把 #checkinput样式里的width:352px去掉,就可以了,不确定原因。 但是两个button的位置需要调整一下。

另外IE8中margin:auto不能保证居中生效,这是IE8的一个bug,因此你也需要调整一下:
比如最外层的div:
<div style="width:960px;height:216px;margin: auto; text-align:center;">

热点排行