Élément de ligne de tableau plié bug_HTML/Xhtml_Production de pages Web

Prenons un exemple : le code est très simple, comme suit :

Copiez le code

Le code est le suivant :

dd

ss

De cette façon, un tableau avec deux lignes et deux colonnes n'affichera aucune erreur dans aucun navigateur. Mais si j'ajoute le CSS suivant, la situation est différente :

Copier le code

Le code est le suivant :

Il semble qu'il va y avoir un problème, mais ne vous inquiétez pas, en fait, vous ne voyez aucun problème en surface à ce moment-là, et la mise en page ne sera certainement pas gâchée,
Vous ne pouvez rien voir qui se chevauche

Je n'ai jamais voulu vous tromper, même s'il n'y a aucun problème en surface. , mais maintenant laissez notre outil de développement ie entrer en jeu, il nous indiquera la mise en page. Qu'est-ce que cela a apporté

Faites attention ? les différences et les similitudes dans les deux images. Notez le cercle de ligne bleue dans la vue de gauche. Quelque chose, la fonction de cet outil est de cliquer sur un élément sur le côté droit et il sera encadré avec un wireframe dans la page Web Mais notez que j'ai cliqué deux fois sur deux éléments différents. Le wireframe a cadré au même endroit. Sweat, j'ai bien lu Oui, c'est à dire que les deux tr se chevauchent, mais ce qui est étrange c'est que les éléments en tr. sont rendus complètement correctement sans affecter le style d'apparence. Ne pensez pas que ce soit sûr. Le danger caché est enterré à ce moment-là J'ai en fait rencontré ce problème lors de la création d'une fenêtre de simulation. la première ligne est la barre de titre de la fenêtre, qui peut être déplacée, et la deuxième ligne est Créer la vue principale, mais plus tard, j'ai découvert que la deuxième ligne du tableau couvrait la première ligne. Même si cela semblait normal, la barre de titre était bloquée et. n'a pas pu être cliqué et déplacé Pour corriger ce phénomène, supprimez simplement la position dans tr 3. De ce point de vue :
Je ne sais pas si vous utilisez une réinitialisation lors de l'écriture de CSS. , c'est ce que je fais, le css dans mon NetBeans La réinitialisation est stockée dans le modèle, et il y aura un paragraphe comme celui-ci dans l'en-tête de chaque fichier css :





Copiez le code

Le code est le suivant :

/* TODO personnaliser cet exemple de style Recommandation de syntaxe http:// www.w3.org/TR/REC-CSS2/

*/

html, corps, div, span, applet, objet, iframe,

h1, h2, h3, h4, h5, h6, p , blockquote, pre,
a, abbr, acronyme, adresse, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
tableau, légende, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
contour : 0;
police -taille : 12 px ;
 alignement vertical : ligne de base ;
arrière-plan : transparent ;

}
corps {
hauteur de ligne : 1 ;
}
ol , ul {
list-style : aucun;
}
blockquote, q {
guillemets : aucun;
}
blockquote:avant, blockquote:après,
q : before, q:after {
content: none;
}
/* Le style lorsque l'élément obtient le focus ! */
:focus {
outline: 0;
}
/* Le style du texte spécial ! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* style de tableau en lignes fines*/
tableau {
border-collapse : réduire ;
border-spacing : 0;
}


Tout le monde sait que si vous souhaitez positionner un élément de manière absolue, vous devez d'abord positionner son élément parent, par exemple, définir une position : relative pour que l'élément enfant puisse être absolu, puis positionner en haut et à gauche
.
Alors j'ai pensé que c'était trop gênant, je pourrais aussi bien définir position:relative pour tous les éléments, puis changer position:absolute pour un positionnement absolu. De cette façon, je n'ai pas à les définir un par un, et tous les éléments peuvent être positionnés de manière absolue.

Le problème mentionné dans cet article arrive donc. Nous définissons position:relative pour tous les éléments, il y a donc un problème avec la table, donc cette approche n'est pas recommandée, et elle entraînera d'autres problèmes de rendu. Je me souviens avoir vu des invites à plusieurs endroits disant que ce paramètre ne peut pas être effectué

Cet article concerne en fait la mise en page, mais ce problème est en effet un bug dans IE, pas une mise en page. problème. Je rencontrerai la mise en page la prochaine fois. Parlons de la mise en page. Au fait, c'est vraiment un bug étrange.