0

以下のコードは、ASP:Menu の StaticItemTemplate から生成されます。

コードとリンクは思い通りに動作しますが、検証に失敗します。

出力コードは次のとおりです

<li>
    <a class="level1 StaticMenuItemStyle" href="/Services.aspx">
    <div class="StaticMenuItemStyle"
         onmouseover="style.backgroundColor=&#39;#0088CB&#39;;style.color=white;"
         onmouseout="style.backgroundColor='';"
         style="color:Color [Blue];width:180px;">
         <a href="/Services.aspx" class="StaticMenuItemStyle">Services</a>
         <br />
         <div style="background-color: Blue; width: 180px;height: 5px;"></div>
    </div>
    </a>
</li>

ただし、このエラーは W3Validator で発生します

  Line 84, Column 63: document type does not allow element "div" here; missing one of  
  "object", "ins", "del", "map", "button" start-tag
  style="color:Color [Blue];width:180px;">

  The mentioned element is not allowed to appear in the context in which you've placed
  it; the other mentioned elements are the only ones that are both allowed there and 
  can contain the element mentioned. This might mean that you need a containing      
  element, or possibly that you've forgotten to close a previous element.

  One possible cause for this message is that you have attempted to put a block-level
  element (such as "<p>" or "<table>") inside an inline element (such as "<a>", 
  "<span>", or "<font>").

ただし、DIVをスパンに置き換えると、検証されます。しかし、正しく見えません。誰でもこれを回避する方法を知っていますか?

4

1 に答える 1

0

「a」タグ内では、div は基本的にブロック セクションであり、デフォルト スタイルはセクション ブロックであるため、div は検証されません。http://webdesign.about.com/od/htmltags/a/aa011000a.htm. ただし、アンカータグの場合はスパンと同じです。div 属性に onclick 属性を使用するか、jquery で .click 関数を使用できます。以下のように使用できます。

<li>
    <a class="level1 StaticMenuItemStyle" href="/Services.aspx">
    <span class="StaticMenuItemStyle" style="display:block;" 
         onmouseover="style.backgroundColor=&#39;#0088CB&#39;;style.color=white;"
         onmouseout="style.backgroundColor='';"
         style="color:Color [Blue];width:180px;">
         <a href="/Services.aspx" class="StaticMenuItemStyle">Services</a>
         <br />
         <div style="background-color: Blue; width: 180px;height: 5px;"></div>
    </span>
    </a> </li>

スクリプトの前にjqueryが初期化されることに注意してください

于 2012-08-13T19:29:50.030 に答える