Problème d'affichage du CSS à l'appel de la bibliothèque Jquery

Bonjour,

Je suis confronté à un problème pour lequel je n'ai trouvé aucune solution.

Je développe un site dont l'affichage pose problème. Une fois sur 4, le CSS est légèrement mal positionné, et du texte n'est pas affiché. Quand on passe la souris sur le CSS problématique, il se repositionne correctement. Quand on double clic/sélectionne le texte qui n'apparaît pas, il apparaît.

J'ai fait mon enquête autant que possible, et en supprimant l'appel de jquery, tout rentre dans l'ordre.

Code à supprimer :

<!-- jQuery library -->
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        </script>

Que je place cet appel au début ou à la fin du chargement du site (header/footer), rien n'y fait, j'ai toujours le même problème.

Et vous vous en doutez, j'ai besoin de jquery.

Alors je ne sais pas si c'est exclusif à mon PC (ce dont je doute), mais je pense que c'est visible ici : http://sylvainscapa.com

Le bug d'affichage est visible dans le menu du haut (une très légère séparation entre les elements de type <li>, entre chaque catégorie), et parfois dans l'affichage des texte, en plein milieu, dans les articles.

Est-ce que quelqu'un a déjà été confronté à ce problème et/ou connaît une solution?
Modifié par seeane (04 Jun 2015 - 17:36)

Salut,

Pour les li collé (ou non) je pense que c'est ta méthode qui pèche. C'est le problème des espaces insécables que tu règle avec un margin négatif. Essaie plutôt de coller toutes tes balises li les unes aux autres comme proposé dans l'article c'est le plus efficace (ou mieux de concaténer ton HTML si jamais tu as l'environnement pour).

Pour le problème du texte effectivement des fois ya certain p qui sont invisible et qui pourtant sont dans le DOM avec rien de choquant niveau CSS... là je vois pas du tout. Tu génères ce contenu en js coté client ?

Bonne soirée

Bonjour _laurent et merci d'avoir pris la peine de te pencher sur mon sujet.

Pour les <li>, malheureusement, ils sont générés en php par wordpress, et je ne peux pas utiliser la solution de les coller (solution que j'utilise toujours quand c'est possible).

Donc, c'est une impasse sur ce point en particulier.

Mais dans tous les cas, comme tu peux le voir avec les balises <p> le problème n'est pas qu'au niveau des <li>.

Il s'agit vraiment d'un problème lié à l'appel de jquery (d'après ce que j'ai pu constater en retirant cet appel).

Or, pour répondre à ta question, je ne génère aucun contenu en JS, seulement deux/trois petites choses telles que le "sticky menu" quand on scroll vers le bas, ou le bouton pour remonter en haut de page.

En revanche, il y a d'autres scripts, tels que le script google analytics. Mais je ne pense pas que cela joue.

Vraiment aucun idée de ce qui pourrait altérer l'affichage des balises html?

seeane a écrit :
Pour les li malheureusement, ils sont générés en php par wordpress, et je ne peux pas utiliser la solution de les coller (solution que j'utilise toujours quand c'est possible). Donc, c'est une impasse sur ce point en particulier.

Mais non mais non : si vous ne voulez pas toucher aux fichiers du thème, mis à part le css, vous pouvez mettre une font-size:0 sur l'élément parent puis rétablir une valeur qui vous conviens sur les élements enfants. Plus de problème d'espaces.

Mais rien ne vous empêche de modifier le loop wordpress lié à la création des <li>.
Modifié par Olivier C (06 Jun 2015 - 09:09)

Bon, je l'ai fais : Exemple reproduit en ligne.

Mais moi j'ai le bug avec ou sans jQuery. Et c'est bien ce que je disais : il s'agit des inline-block. Il faut donc faire une bidouille genre font-size:0 sur l'élément parent et rétablir une taille sur les enfants ; du genre :

.menu {
    font-size: 0;
}

.menu * {
    font-size: initial; /* en px ou en rem si l'on préfère, mais pas en em ni en pourcentage : un pourcentage de 0 c'est toujours 0... */
}

Modifié par Olivier C (09 Jun 2015 - 13:16)

Merci Olivier de t'être penché sur ce problème avec autant d'attachement.

Dès que j'ai un peu de temps, je modifierai le code.

En revanche, je suis persuadé que je n'aurais pas ce problème si une solution globale était possible.
J'entends pas là, une solution qui règle aussi l'affichage des balises <p>.

Je pense que les deux sont liés, et que si on corrige l'un, ça corrigera l'autre.
Modifié par seeane (13 Jun 2015 - 11:19)