jQuery .css() не работает в IE 6,7,8 и Firefox, но работает в Chrome, Safari, Opera

ProgramBox

jQuery .css() не работает в IE 6,7,8 и Firefox, но работает в Chrome, Safari, Opera

Post author:admin
Запись опубликована:11 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

ОБНОВЛЕНИЕ: ЭТО БЫЛО РЕШЕНО.

Я пытаюсь изменить стиль вспомогательного сайта по умолчанию с помощью JavaScript, потому что таблица стилей недоступна для редактирования мной. Он отлично работает в Chrome, Safari, Opera и IE9; но не в IE 6,7,8 или любом Firefox.

В приведенном ниже коде первые две строки, которые задают h2 и изображение, работают во всех браузерах, а строки .css() — нет. Почему .css() не работает в определенных браузерах?

Вот код.

 <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>

1. Должны ли эти пробелы быть там, в имени файла? А как насчет всего этого importants ?

2. Спасибо , пожалуйста.

3. Добавлена ссылка. Пробелы удалены — каким-то образом они были вставлены при копировании в коде здесь. Я ввел !importants, чтобы переопределить другие CSS, уже установленные в таблице стилей, которые я не могу изменить.

4. Это может быть так же просто, как и то, к чему стремится GolezTrol: пробелы недопустимы в URL-адресах, а !важные утверждения полностью уничтожат ваше наследование. Если разные браузеры имеют разные способы разрешения сложенных «!important» операторов, это может быть CSS, а не JS вообще.

5. В самом коде нет пробелов. Это произошло при копировании в Stack Overflow. Удаление операторов !important приводит к тому, что код перестает работать во ВСЕХ браузерах. Это необходимо, потому что CSS, который я не могу редактировать, уже содержит !важные инструкции, указанные в нем.

Ответ №1:

Я добавлю к тому, что сказали другие: я подозреваю, что проблема может быть связана с !important флагом.

Вопрос в том, зачем вам это нужно? Вы устанавливаете это для встроенного стиля, так что в любом случае это должно переопределять любые другие стили; единственное, что не будет переопределено по умолчанию для встроенного стиля, — это другой отмеченный стиль !important , поэтому я предполагаю, что это то, что вы пытаетесь сделать.

Проблема в том, что как только вы используете !important , вы в основном сообщаете браузеру, что этот стиль должен превзойти все остальное; наследование и приоритет выходят из окна.

Если у вас есть несколько !important стилей для одного и того же элемента, оба будут иметь одинаковый приоритет, поэтому вы никогда не сможете быть уверены, что произойдет. Некоторые браузеры будут выбирать один, некоторые — другой.

Реальный урок, который следует извлечь из этого, заключается в том, чтобы избегать использования !important в ваших таблицах стилей, если только это не абсолютно неизбежно, и, конечно же, избегать его для всего, что вы впоследствии захотите переопределить.

Из-за того, как CSS упорядочивает вещи в порядке приоритета и наследования, на самом деле очень мало случаев, когда !important это действительно необходимо. Почти всегда есть альтернативный (лучший) способ сделать это.

Итак, короткий ответ: переработайте свои таблицы стилей, чтобы избавиться от !important маркеров. Ваш код jQuery не будет работать корректно, пока вы этого не сделаете (и на самом деле, глядя на количество !important маркеров на вашем сайте, ваш CSS сам по себе, возможно, уже пытается все исправить)

1. Спадли, как я уже говорил в других комментариях. Я не могу удалить !важно в таблице стилей! Он принадлежит не мне, он принадлежит Assistly. Итак, вопрос в том…. как мне удалить стили в таблице стилей, которые я не редактирую? Я наткнулся на этот сайт, но я не смог заставить его работать. hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript Есть идеи о том, как удалить CSS, который находится в таблице стилей, которая недоступна для редактирования мной, и добавить мои собственные стили через Javascript?

2. @kfawcett — способ !important , используемый в таблицах стилей, является кодом низкого качества, что плохо отражается на Assistly. Если это вообще возможно, я бы посоветовал попытаться найти способ заменить эту таблицу стилей, потому что это корень всех ваших проблем. С таким количеством !important s это серьезно затруднит вашу способность корректировать внешний вид вашего сайта вообще. Взлом вокруг него может помочь, но это не решит проблему в долгосрочной перспективе. Если вы можете добавить код Javascript, то, надеюсь, вы можете изменить шаблон страницы? Просто измените URL-адрес CSS и вместо этого загрузите свои собственные стили.

3. После фактического просмотра кода стили являются внутренними, а не во внешней таблице стилей. Как я могу изменить их с помощью JavaScript или jQuery?

4. @kfawcett — ой. С этим будет сложно работать. Вы можете изменить класс рассматриваемого элемента и, следовательно, свои собственные стили, но подобные изменения могут привести к нарушению кода JS / jQuery, который ищет класс. Можно удалять правила из таблицы стилей с помощью Javascript, но это действительно неудобно (и IE нарушает стандарты, поэтому вам приходится выполнять специфичный для браузера код). Вы получаете доступ к своему CSS как к объекту, но поиск тех, которые вам нужно удалить, является болезненным. Посмотреть devfiles.myopera.com/articles/621/addingandremovingrules.html для примера.

Ответ №2:

Удалите !important из своего кода. !important должен использоваться только в таблицах стилей, а не во встроенных атрибутах.

1. Их удаление приводит к тому, что javascript не работает ни в одном из браузеров.

2. @kfawcett — это потому, что вы серьезно злоупотребили !important своими таблицами стилей. !important следует рассматривать как инструмент последней инстанции.

Ответ №3:

В IE он хорошо работает для использования

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

Хотя тогда вам понадобится отдельная строка для каждого свойства.

Примечание: вы можете легко указать важные с помощью

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