utiliser la largeur initiale pour l'élément ne fonctionnant pas dans IE

107

J'ai un plugin graphique qui insère un canevas et une légende <table>dans son conteneur. Dans ce plugin, le tablen'est pas widthdéfini et dans mon CSS, il y a une largeur pour les tables à l'intérieur de ce conteneur où mon plugin est inséré.

Ainsi, le nouveau div hérite table{ width: 100%}du CSS et se rend mal.

J'ai essayé d'utiliser width: initial;, ça a l'air bien sur Chrome mais IE n'aime pas ça ^{vérifier la compatibilité du navigateur}

J'admets changer / forcer un CSS en ligne dans le script / plugin car il doit fonctionner dans n'importe quel environnement.

Quelle est la meilleure solution ici?

— Rikard
source

Avez-vous simplement essayé de définir une largeur minimale? Est-ce que ça marche?

— BuddhistBeast

@BuddhistBeast, je n'y ai pas pensé! Mais j'ai essayé cela maintenant et n'a pas fonctionné non plus sur Chrome.

— Rikard

Réponses:

177

Comme vous l'avez dit, width: autoaura généralement un effet similaire. Avoir les règles:

.my-selector {
    width: auto;
    width: initial;
}

Devrait le faire utiliser initials'il est pris en charge et autoautrement.

— Mark Rhodes
source

Cela a résolu mon problème. Merci.

— dchayka le

Ça m'a sauvé une heure. Merci.

— Skitterm

A noter, initial est une valeur de propriété valide ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Mais (si vous faites défiler jusqu'à "Compatibilité du navigateur" dans le lien précédent), aucune version d'IE ne le prend en charge.

— gtramontina le

ceci est connu comme une solution de secours et est un modèle de codage très courant en CSS. De plus, l'utilisation width: autoaura non seulement un effet similaire , mais aura exactement le même effet, car elle autoest définie comme étant la valeur initiale de la widthpropriété.

— chharvey

L'utilisation en width: auto;ligne, à l'intérieur du script, résout le problème sur Chrome, FIrefox et IE 11. Je ne sais pas s'il existe un meilleur moyen.

— Rikard
source