2011-08-09 5 views
0

J'ai été googling et grepping pendant un moment. Je n'ai pas encore trouvé de solution. Je joins un échantillon html. Ceci est généré par un package tiers utilisé dans DNN. Chrome ne parvient pas à afficher l'élément comme indiqué. IE9 et FF vont bien. Tous les commentaires ont apprécié.Chrome ne rend pas div ou span revisité

<div> 
    <table align="left" sizcache="18" sizset="196" style="height: 100%;"> 
      <tbody sizcache="18" sizset="196"> 
       <tr> 
       <td> 
        <span> 
        I can see this element... 
        </span> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        <div style="width: 100%; height: 100%; overflow-x: auto; overflow-y: auto;"> 
         <span style="width: 450px; height: 100px; display: inline-block;"> 
         You can see me in IE9, Firefox, but not Chrome!!! 
         </span> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td style="height: 10px;" colspan="2"> 
       ... and this element. 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
+0

J'ai pris votre code jeta dans un HTML page générée par TextPad et cela fonctionne très bien dans Chrome. Le DocType est '' Peut-être que votre type de doc met votre navigateur en mode quirks ou quelque chose de similaire et l'empêche de s'afficher correctement. Je peux mettre en place toute la page d'exemple si vous pensez que cela va aider. – Tod

+0

FYI Changé le DocType à 4.0 et il n'a pas réussi à montrer. – Tod

Répondre

1

Il suffit de se débarrasser des deux déversoirs dans votre style div. http://jsfiddle.net/zeuFT/1/

+0

Salut les gars - J'ai eu l'exemple de code chargé dans MS Expression Web 4. Il a squawk aux débordements (ainsi que quelques autres attributs - sizcache, sizset, aligner, etc.). Supprimer les débordements a résolu le problème. Merci! Quel super forum. – soulia

+0

De rien. Heureux d'avoir pu aider. – evasilchenko

+0

Salut les gars - Un petit suivi pour ceux qui sont intéressés ... en utilisant IE9 et les outils de développement Chrome, j'ai modifié les attributs en utilisant les recommandations énumérées dans cette rubrique. La modification de colspan = "2" à = "1" dans Chrome DevTools n'affichait pas le contenu de l'étendue. Suppression du débordement-x: auto; overflow-y: automatique; a montré le contenu comme indiqué ci-dessus. Le schéma pour le document utilisé est: Les attributs" overflow-x et overflow-y "ne sont pas pris en charge par ce schéma actuel. – soulia

0

Le div est mis à height: 100%;, mais le parent n'a pas la hauteur définie, il est donc 100% de rien. Ajouter une hauteur au parent td affichera la div.

http://jsfiddle.net/2msKf/2/

0

Je pense que le problème est incorect HTML. S'il vous plaît noter qu'il ya seulement 1 TD dans chaque rangée, mais le TD avec div qui n'est pas affiché a colspan = "2" .. Je crois que le chrome ne peut pas gérer cela

+0

Enlever le colspan ne résout pas le problème: http://jsfiddle.net/2msKf/3/ –