Question

在大于9.0的opera版本中，我发现了一个无法呈现文本大部分内容的错误。链接，范围和强标记会发生这种情况。除此之外，它还会在sup标签上引发一个奇怪的错误。

以下是实际网站的链接：http://clients.bionic-comms.co.uk/licensingawards/microsite/enter.html 下面是代码（第一个div根本没有给我任何问题）：

<!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>Licensing Awards '09 - Enter Your Products</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--[if IE 6]> 
      <link rel="stylesheet" type="text/css" href="css/ie.css">
    <![endif]-->
    <noscript><link rel="stylesheet" type="text/css" href="css/noscript.css"></noscript>
    <script src="js/shadedborder/shadedborder.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="page">
      <div id="otherbits">
        <a href="about.html" id="licensing" name="About"><i>About</i></a>
        <a href="http://www.bionic-comms.co.uk" id="bionic" name="Bionic"><i>Bionic</i></a>
      </div>
      <div id="header">
        <div id="nav">
          <div id="menu"> 
            <a href="enter.html" id="home" name="Home"><i>Home</i></a>
            <a href="nominate.html" id="nominate" name="nominate"><i>nominate</i></a>
            <a href="tickets.html" id="tickets" name="tickets"><i>tickets</i></a>
            <a href="about.html" id="about" name="about"><i>about</i></a>
            <a href="photos.html" id="photos" name="photos"><i>photos</i></a>
          </div>
        </div>
      </div>
      <div id="lildetails">
        <p>Thursday September 10th 2009, Royal Lancaster Hotel, London &bull; Black Tie / Posh Frocks</p>
      </div>
      <div id="enter">
        <div class="head">
          <h2 class="enter">Here you can download the entry form for the product categories in The Licensing Awards 2009. These annual product awards are open to all UK and Ireland-based companies and are for officially licensed ranges.</h2>
        </div>
        <div class="circle1">1</div>
        <div class="text1">
          <div id="my-border">
            <h5 class="enter">Fill in the form:</h5><br /><span class="enter">Fill in the entry form (one form per entry). <strong>You can download the form <a href="files/entryform.pdf" class="enter">here</a>.</strong></span>
          </div>
        </div>
        <div class="circle2">2</div>
        <div class="text2">
          <div id="my-border1">
            <h5 class="enter">Select your product entries:</h5><br /><span class="enter">Check that the products being entered comply with the entry requirements (i.e. were launched between June 1st 2008 and May 31st 2009). You should submit up to five actual items for each licensed range. Remember &ndash; entries should be license&ndash;specific.</span>
          </div>
        </div>
        <div class="circle3">3</div>
        <div class="text3">
          <div id="my-border2">
            <h5 class="enter">Send your entries:</h5><br /><span class="enter">All entry forms, samples and supporting materials should be sent (arriving no later than June 1st) to:<br /><br /> <span class="enter">The Licensing Awards, Max Publishing, United House, North Road, London, N7 9DP</span>.<br /><br />For further clarification on entering contact Ian Hyder or Jakki Brown at The Licensing Source Book on 202 7700 6740 or by email: <a href="mailto:ianh@max-publishing.co.uk" class="enter">ianh@max-publishing.co.uk</a></span>
          </div>
        </div>
      </div>
    </div>

    <script language="javascript" type="text/javascript">
      var browser=navigator.appName;
      var b_version=navigator.appVersion;
      var version=parseFloat(b_version);
      if ((browser=="Microsoft Internet Explorer") && (version=4)) {  } 
      else {
        var myBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
        myBorder.render('my-border');
        myBorder.render('my-border1');
        myBorder.render('my-border2');
      }
    </script>
  </body>
</html>

如果有人可以对此有所了解或告诉我我做错了什么，我将不胜感激。

Answer 1

我不知道为什么，因为我知道所有关于Javascript，但它的shadedbo.js导致错误。删除它（只有那个）使得网站在Opera 9.26上正确呈现

Answer 2

您是否尝试过使用Opera Dragonfly？它是内置的Javascript调试器，也可以让您检查页面的DOM。

Dev.Opera上有一个introductory article。

错误控制台也可能有帮助，您可以在“工具”，“高级”，“错误控制台”下找到它。以下是我在Opera 9.63中的显示内容：

CSS - http://clients.bionic-comms.co.uk/licensingawards/microsite/css/style.css
Linked-in stylesheet
Expected ruleset
Line 10:
  # pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 
  ---------------------------------------------------------------^
CSS - http://clients.bionic-comms.co.uk/licensingawards/microsite/css/style.css
Linked-in stylesheet
Declaration syntax error
Line 373:
  }
  -^
CSS - http://clients.bionic-comms.co.uk/licensingawards/microsite/enter.html
HTML style attribute
background-position-y is an unknown property
Line 1:
  tion:absolute; margin:0; padding:0; width:100%; left:0px; background-position-y:
  --------------------------------------------------------------------------------^

Answer 3

您可能需要validate此文档。您将其声明为XHTML，但事实并非如此。你也有未转义的保留字符。（＆amp;＆amp; in script part）

我认为这些问题不是造成渲染问题的原因，但是谁知道。有时修复警告可以解决错误：）

Answer 4

在Firefox 3.0.6和Opera 9.62中，该页面看起来与我相同。但是，您在CSS中有一对错误以及您应该查看的Javascript错误。在Firefox中打开错误控制台并浏览到该页面，您将看到它们。

Opera中的Html错误

4 个答案: