jQuery .css() ne fonctionne pas dans IE 6,7,8 et Firefox, mais fonctionne dans Chrome, Safari, Opera

Question

MISE À JOUR: CELA A ÉTÉ RÉSOLU. J'essaye de changer le style par défaut d'un site Assistly par JavaScript, parce que la feuille de style n'est pas éditable par moi. Cela fonctionne bien dans Chrome, Safari, Opera et IE9; mais pas dans IE 6,7,8 ou tout Firefox.

Dans le code ci-dessous, les deux premières lignes qui définissent un h2 et une image fonctionnent sur tous les navigateurs, mais les lignes .css() ne le sont pas. Pourquoi .css() ne fonctionnerait pas dans certains navigateurs?

Voici le code.

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$("#support-header .wrapper h2").first().html('<h2>Real Estate Help</h2>'); 
$("#company-header .wrapper").html('<a href="http://help.mysite.com/"><img src="http://www.mysite.com/logo-red.png" /></a>'); 
$("body").css({'background': '#FFFFFF !important'}); 
$("#company-header").css({'background': 'none !important'}); 
$("#support-header").css({'background': 'none !important', 'border-bottom': 'none', 'padding': '0'}); 
$("#company-support-portal").css({'background-image': 'url(http://www.mysite.com/container-bg2.jpg) !important', 'background-repeat': 'repeat-x', 'margin-top': '10px'}); 
}); 
</script> 

Answer 1

Dans IE, il fonctionne bien utiliser

element.css('property', 'value') 

Même si vous avez besoin alors une ligne distincte pour chaque propriété.

Remarque: vous pouvez spécifier importante facilement avec

$.('#elid').css('display', 'block !important') 

Answer 2

Retirez !important du code. !important ne doit être utilisé que dans les feuilles de style, et non dans les attributs en ligne.

Answer 3

Je vais ajouter à ce que d'autres ont dit: Je soupçonne que le problème peut être lié au drapeau !important.

La question est pourquoi avez-vous besoin? Vous définissez ceci sur un style en ligne, de sorte que cela devrait remplacer tous les autres styles de toute façon; la seule chose qui ne sera pas annulée par défaut sur un style en ligne est un autre style qui est marqué !important, donc je suppose que c'est ce que vous essayez de faire. Le problème est que dès que vous utilisez !important, vous dites essentiellement au navigateur que ce style devrait l'emporter sur tout le reste; l'héritage et la préséance sortent de la fenêtre.

Si vous avez plusieurs styles !important sur le même élément, les deux auront la même priorité, donc vous ne pouvez jamais vraiment être sûr de ce qui va se passer. Certains navigateurs en récupèrent un, d'autres l'autre. La véritable leçon à tirer de ceci est d'éviter d'utiliser !important dans vos feuilles de style, à moins que ce soit absolument inévitable, et certainement l'éviter pour tout ce que vous voudrez ensuite remplacer.

En raison de la manière dont CSS classe les choses par ordre de priorité et d'héritage, il y a en fait très peu de cas où !important est réellement nécessaire. Il y a presque toujours une alternative (meilleure) façon de le faire.

Donc, la réponse courte: Re-travailler vos feuilles de style pour se débarrasser des marqueurs !important. Votre code jQuery ne va pas fonctionner correctement jusqu'à ce que vous le fassiez (et en fait, en regardant le nombre de marqueurs !important sur votre site, votre CSS peut déjà avoir du mal à faire les choses comme il est)