サブカテゴリを展開するときにHTMLカテゴリメニューが右に移動するのはなぜですか？

Question

私は必要な機能を提供するためにjQueryUIアコーディオンウィジェットを使用しています。私は解決策が私をエスケープするようにIEの調整をよく知らない。

test siteにアクセスする場合は、Firefox、Opera、Chromeなどの最新のブラウザを使用してカテゴリを拡張してみてください。意図したとおりに動作します。

IE8を使用すると、カテゴリツリーが少し左に移動し、カテゴリ間にさらに大きな分離があります。

この動作不良を修正するにはどうすればよいですか？

（注：IE6,7のサポートを忘れる、それだけで動作するように持って、かなり見ていない）を

Answer 1

削除幅をカテゴリクラスから、IE8にしようとした問題は、あなたが悪い持って

Answer 2

消えますHTML5のマークアップを作成しました。それは役に立たないかもしれない。あなたが持っているリストの要素の数は本当に長いので、ちょうどスニッピッとします。

<div class="widget-box"> 
    <h1>MENÚ PRODUCTOS</h1> 
    <div class="content"> 
     <div class="categories"> 
      <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/66">CCTV</a><p class="subtext">Circuito cerrado de televisi&#243;n </p></h3> 
      <div> 
       <ul> 
        <div class="categories"> 
         <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/74">Camaras</a><p class="subtext"></p></h3> 
         <div> 
          <ul> 
           <div class="categories"> 
            <h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3> 
            <div> 
             <ul></ul> 
            </div> 
           </div> 
           <div class="categories"> 
            <h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3> 
            <div> 
             <ul></ul> 
            </div> 
           </div> 

上記の7行目と11行目では、ULタグがありますが、その後DIVタグを使用します。 ULタグは、W3ごとに子としてLI要素しか持てません。 http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html

私はあなたのHTMLはこれに近いかもしれないと思う：

<div class="widget-box"> 
    <h1>MENÚ PRODUCTOS</h1> 
    <div class="content"> 
     <ul> 
     <li> 
      <h3><a href="#">CCTV <b>Circuito cerrado de televisi&#243;n</b></a></h3> 
      <ul> 
      <li> 
       <h3><a href="#">Camaras</a></h3> 
       <ul> 
       <li><a href="#">Camaras Infrarrojas</a></li> 
       <li><a href="#">Profesional</a></li> 
       </ul> 
      </li> 

けれども、私がここに持っているものよりも可能タグのより良いセマンティック使用することはおそらくあります。

H3>タグの左側に小さなパディングを追加し、+/- gifをCSSクラスと入れ替え可能な背景イメージとして使用できます。そうすれば、クリックされたアンカークラスを単に切り替えるだけでjQueryでスワップを真似することができます。それは私が言及した以前のバグを解決するのに役立ちます。

Yucelが他の問題の解決策を持っているようですが、HTMLの問題がさらに進んでいる可能性があります。

乾杯！