Wie verschachtelte Form von jQuery unter IE8

Ein HTML-Segment mit einem div ein Formular mit einer Tabelle enthalten, verbergen:Wie verschachtelte Form von jQuery unter IE8

<!DOCTYPE html> 
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" --> 
<head> 
    <style type="text/css"> 
    #content{position:relative} 
    table {border-color:#999;border-style:solid} 
    </style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 

<body> 
    <button onclick="javascript:$('.content-panel').toggle();">Toggle</button> 
    <div id="content"> 
     <div class="content-panel"> 
      <form action='' method='post'> 
       <select> 
        <option>a </option> 
       </select> 

       <table> 
        <tr><td>ABCDEF</td></tr> 
       </table> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

Die Toggle-Taste, um die Form und die verschachtelten Tabelle verbergen soll, aber nicht so unter IE8. (Version 8.0.60001) Der Formularinhalt wird ausgeblendet, aber der Tabellenrahmen wird weiterhin angezeigt und behält seine Größe bei. Es bezieht sich auf den Standardmodus; Es verschwindet im Quirks-Modus.

Hat jemand einen Workaround dafür?

Diese Beispielseite ist so weit reduziert, wie ich sie reduzieren kann. Wenn ich die Auswahl oder eines der divs entferne, verschwindet das Problem. Die Auswahl muss vorhanden sein, und die Tabelle muss im Formular verschachtelt sein, da sie Formularelemente enthält.

Die Seite selbst ist: http://dev.rdbhost.com/rdbadmin/mainProbDemo.html

ich dieses Problem früher mit einem allzu vereinfachtes Beispiel geschrieben, die nicht reproduzierbar war. Danke, wenn du es dann angeschaut hast.

Quelle

2010-04-29 Rdbhost

Können Sie dieses jsfiddle Link teilen? – rahul

Es überrascht nicht, Ihr Fehler ist [nicht reproduzierbar] (http://jsbin.com/ifaxe4). Sie sollten wirklich auf die Seite verlinken. – Kobi

Eigentlich ist es reproduzierbar, wenn Sie auf "Bearbeiten" klicken, dann Vorschau erneut ... aber es scheint nur ein Problem mit Jsbin zu sein. Ich konnte das Problem nicht aus einer HTML-Datei auf meinem Desktop reproduzieren. Wie auch immer, warum verstecken Sie nicht einfach das div mit CSS? – Mottie

Warum hat Ihr onclick-Handler die javascript: schema-Deklaration?

<button onclick="$('.content-panel').toggle();">Toggle</button>

Quelle

2010-06-10 19:46:44 landons

Nun, natürlich, um die Sprache von all diesen * anderen * Sprachlaufzeiten im Browser zu unterscheiden. Manchmal ist mein Code paranoid. Manchmal ist es nicht paranoid genug. – Rdbhost

Mein Fehler ... habe seit einiger Zeit niemanden gesehen, der VBScript oder ähnliches benutzt. Haben Sie versucht, eine Klasse auf dem div umzuschalten? Auf diese Weise können Sie einige Regeln in Ihrem CSS festlegen, um die Tabelle und alle anderen untergeordneten Elemente zu kaskadieren ... – landons

http://api.jquery.com/detach/ könnte für Sie arbeiten, wenn nur versteckt funktioniert nicht - es wird das Element aus dem Dom, zu entfernen, aber es speichern, damit Sie es wieder einsetzen können, wenn Sie wollen (http://api.jquery.com/append/ oder http://api.jquery.com/appendTo/ verwenden). Sie können auch versuchen, das Sichtbarkeits-CSS-Attribut $(".content-panel").css("visibility","hidden"); als zusätzliche Kennzahl festzulegen (beachten Sie, dass das Element immer noch Speicherplatz belegt, siehe auch http://www.w3schools.com/css/pr_class_visibility.asp) (Bearbeiten: Zurückkehren mit $(".content-panel").css("visibility","visible");). Last but not least, Sie können nie wissen - vielleicht nur mit show(0); und hide(0); funktioniert und Toggle ist in irgendeiner Weise borked - nicht wahrscheinlich, dann gilt wieder Murphy in diesem Fall gilt.

Quelle

2010-06-12 11:03:41 ralokt

Ist es in Ordnung mit Ihnen, die gesamten Formularelemente mit zusätzlichen Tabelle zu umhüllen? Etwas wie folgt aus:

<!DOCTYPE html> 
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" --> 
<head> 
    <style type="text/css"> 
    #content{position:relative} 
    .inner {border-color:#999;border-style:solid} 
    </style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 

<body> 
    <button type="button" onclick="javascript:$('.content-panel').toggle();">Toggle</button> 
    <div id="content"> 
     <div class="content-panel"> 
      <form action='' method='post'> 
       <table> 
        <tr> 
         <td> 
          <select> 
           <option>a </option> 
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <table class="inner"> 
           <tr><td>ABCDEF</td></tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

oder das Hinzufügen von nur alle Elemente in Form der Tabelle Sie haben:

<form action='' method='post'> 
      <table> 
       <tr> 
        <td> 
         <select> 
          <option>a </option> 
         </select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         ABCDEF 
        </td> 
       </tr> 
      </table> 
    </form>

Quelle

2010-06-17 14:58:38 ifaour

Wie verschachtelte Form von jQuery unter IE8

Antwort

Verwandte Themen