-1

以下のコードは IE8 では機能しますが、他のブラウザーでは機能しません。主な問題は幅にあります。使用した形状のサイズは IE8 では機能しますが、他のブラウザーでは機能しません。このコードをすべてのブラウザと互換性を持たせるにはどうすればよいですか。

<html>
<head>
<meta name="author" content="Shivakumar">
<meta name="generator" content="">
<style type="text/css"> 
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-    weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

</head>
<body bgColor="#FFFFFF">
   <div id="shape1" style="position:absolute; overflow:hidden; left:3px; top:50px;   width:993px; height:54px; z-index:0"><img border=0 width="100%" height="100%" alt=""       src="C:\Documents and Settings\snatarajan\Desktop\s\shapeSTUKG.gif"></div>

 <select name="formselect1" style="position:absolute;left:665px;top:65px;width:134px;z-     index:1">
 <option value="option1">option 1</option>
 <option value="option2">option 2</option>
 </select>
 <input name="formtext1" type="text" style="position:absolute;width:433px;left:199px;top:64px;z-index:2">
 <input name="formbutton1" type="button" value="Go!" style="position:absolute;left:822px;top:65px;z-index:3">
 <div id="text1" style="position:absolute; overflow:hidden; left:53px; top:65px; width:114px; height:90px; z-index:4">
 <div class="wpmd">
 <div><font color="#FFFFFF" face="Book Antiqua" class="ws12" style="background- color:#99CCFF;"><B>type here</B></font></div>
 </div></div>

 <div id="hr1" style="position:absolute; overflow:hidden; left:2px; top:104px;   width:994px; height:21px; z-index:5">
 <hr size=2 width=994 color="#99CCFF">
 </div>

 <div id="text2" style="position:absolute; overflow:hidden; left:799px; top:19px;  width:55px; height:19px; z-index:6">
 <a href="ss_signup.html" target="iFrame1"><div class="wpmd">
 <div><font color="#FFFFFF" face="Calibri" style="background-color:#99CCFF;"><B>New  User</B></font></div>
 </div></a></div>

 <div id="text3" style="position:absolute; overflow:hidden; left:883px; top:19px; width:45px; height:21px; z-index:7">
 <a href="ss_signin.html" target="iFrame1"><div class="wpmd">
 <div><font color="#FFFFFF" face="Calibri" style="background-color:#99CCFF;"><B>Sign- in</B></font></div>
 </div></a></div>

 <div id="text4" style="position:absolute; overflow:hidden; left:863px; top:21px; width:10px; height:18px; z-index:8">
 <div class="wpmd">
 <div><font color="#3366FF" face="Calibri">|</font></div>
 </div></div>

 <div id="text5" style="position:absolute; overflow:hidden; left:780px; top:20px;  width:10px; height:19px; z-index:9">
 <div class="wpmd">
 <div><font color="#3366FF" face="Calibri">|</font></div>
 <div><font face="Calibri"><BR></font></div>
 </div></div>

 <div id="text6" style="position:absolute; overflow:hidden; left:738px; top:19px;    width:37px; height:20px; z-index:10">
 <div class="wpmd">
 <div><font color="#FFFFFF" face="Calibri" style="background- color:#99CCFF;"><B>Home</B></font></div>
 <div><font color="#99CCFF" face="Calibri" style="background- color:#FFFFFF;"><BR></font></div>
  </div></div>

  <div id="iFrame1" style="position:absolute; left:0px; top:113px; z-index:11">
  <iframe name="iFrame1" width="988" height="647" src="" scrolling="no"   frameborder="0"></iframe>
  </div>


</body>
</html>
4

2 に答える 2

3

Doctype がありません。これにより、ブラウザーが古いブラウザーのバグをエミュレートするQuirks モードがトリガーされます。IE のこれらのバグの 1 つは、CSSwidthプロパティが間違っていることです。

標準モードをトリガーする Doctype を追加します。これにより、一貫性が大幅に向上します。その後、CSS を調整して修正できます。

標準モードをトリガーする Doctype には、最新の HTML 仕様およびドラフト HTML 5 仕様のものが含まれます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

htmlとcssも検証する必要があります。

于 2012-06-22T06:46:03.497 に答える
0

CSS内（<style>タグ内およびインラインスタイル内）にいくつかの空白があります。たとえば、次の行を変更する必要があります

.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-    weight: normal;}

に

.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}

最後の「font-」と「weight」の間の空白に注意してください。同様のエラーが複数のエントリに表示されます。

Firefoxでは、CTRL + SHIFT + Kを使用して、これらのCSS（および後でJSでも）エラーを確認できます。

于 2012-06-22T06:53:04.350 に答える