-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 中的这些错误之一是它获取了width错误的 CSS 属性。

添加触发标准模式的 Doctype。这将增加很多一致性。然后，您可以调整 CSS 来修复它。

触发标准模式的文档类型包括最新的 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 回答