ホームページ  >  記事  >  ウェブフロントエンド  >  IE での互換性の問題、 が表示される [ヘルプ]_html/css_WEB-ITnose

IE での互換性の問題、 が表示される [ヘルプ]_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:23:291468ブラウズ

互換性の問題については、Mac の Safari と Chrome では問題はありません。Win の Chrome では基本的に問題はありません。IE では問題があるだけです。
これら 4 つの入力ボックスは正常に表示できません (水平に表示されます)。どこをデバッグすればよいか教えていただけますか。
午後からずっと作業してて、めまいがしてきました... 私は HTML を学ぶのは初心者ですが、みんなを笑わせてくれます


<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=4name=fwm1>-<input type="text" language=javascript onKeyUp="return fwm2_onkeyup()" maxLength=4 size=4name=fwm2>-<input type="text" language=javascript onKeyUp="return fwm3_onkeyup()" maxLength=4 size=4name=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>


ディスカッション (解決策) に返信

座ってみましょう自分たちでソファ 楽しみ〜

IE はほぼ垂直ですが、私の IE10 、IE6、IE7 はすべて一列に並んでいます

IE8 は垂直で、とても奇妙です。

#checkinput スタイルの width:352px を削除すると、理由はわかりません。ただし、2 つのボタンの位置を調整する必要があります。

さらに、IE8 の margin:auto は中央に配置されることが保証されていません。これは IE8 のバグなので、これも調整する必要があります。
たとえば、一番外側の div:

<div style="width:960px;height:216px;margin: auto; text-align:center;">

width を変更した場合。 #checkinput スタイルの場合: 352px を削除するだけで、理由はわかりません。ただし、2 つのボタンの位置を調整する必要があります。

さらに、IE8 の margin:auto は中央に配置されることが保証されていません。これは IE8 のバグなので、これも調整する必要があります。
たとえば、一番外側の div:

<div style="width:960px;height:216px;margin: auto; text-align:center;">



これは、次のようになります。これはie8にのみ当てはまります。ははは、ありがとうございます、解決しました

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。