Squeak.ru - шаблоны программирования

CSS - Как сделать, если Firefox, Safari, Opera и IE?

Мне нравится эффект использования вставки границы и тени блока, но только «Chrome» поддерживает отрицательное значение вставки 0px, 0px, -1px.

Однако, когда я проверил FF, Safari и IE (опера у меня ее нет, но я уверен, что она ее тоже не поддерживает) ... Box-shadow вообще не было.

Когда я проверяю элементы с помощью firebug и пытаюсь ввести box-shadow: 0px 0px 1px rgba(255,255,255,0.7) inset; он появляется, но не с -1px. Тогда значение недействительно.

Кто-нибудь знает что-нибудь об этом? Если нет, то как я могу сделать «ЕСЛИ», браузер не хром, а вместо этого добавить положительное значение?

css
07.08.2012

  • Сначала поместите правило отката, а затем правило, которое поддерживается только в Chrome, все браузеры, которые его не поддерживают, будут игнорировать его и использовать предыдущее правило. 08.08.2012
  • Yeh работает для FF, но не для сафари: Странно. Даже если добавлен -webkit, сафари не распознает его. 08.08.2012
  • Отрицательные числа не допускаются в третьем значении тени блока, поэтому 0px 0px -1px недопустимо. Если это работает в Chrome, это ошибка. Не полагайтесь на это. 08.08.2012
  • BoltClock +1 ... Полезно знать. Но эффект с отрицательным значением чертовски лучше, чем с положительным значением :( 08.08.2012
  • @NenaddvL Попробуйте с отрицательным четвертым параметром. 0px 0px 2px -1px вы можете получить тот же эффект, который вы сейчас копаете 08.08.2012
  • @KyleMacey, кажется, ничего не происходит, кроме того, что тень исчезает в каждом браузере :( 08.08.2012
  • вы также можете складывать свои тени для достижения желаемого эффекта (хотя не уверен, что у вас). У вас может быть столько теней, сколько вы хотите на одном элементе, как встроенном, так и обычном, если вы разделяете их запятой. Также я всегда ставлю вставку первой, но не уверен, что это имеет значение. 08.08.2012
  • Не имеет значения... Я согласен с ответом сахлина. Выглядит довольно мило и легко. Спасибо за все ваши ответы, люди. 08.08.2012

Ответы:


1

Я уверен, что для этого конкретного случая есть лучший способ, но я просто хочу поделиться этим.

CSS Browser Selector – это довольно неплохой небольшой JS-файл, который позволяет указывать классы CSS для определенных браузеров.

Например, следующее будет применяться только к элементам с классом example, если используется браузер IE7.

.ie7 .example {
  background-color: orange
}

На странице перечислены все поддерживаемые браузеры, и вы можете создать стиль, применимый ко всему, кроме Chrome.

.ie, .ie7, .ie8, .opera, ... { style }
07.08.2012
  • +1 ... ну, я надеюсь, что есть какое-то другое решение, если нет, я проверю это как правильный ответ, так как он правильный ... Спасибо, что поделились, sachleen. 08.08.2012

    • 2

    Вы можете использовать обнаружение пользовательского агента для обнаружения браузера Chrome:

    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    (взято с этой страницы)

    а потом:

    // include this in the <head> of your doc
if (is_chrome) {
   <link href="chrome_style.css" rel="stylesheet" />
} else {
    // do stuff for other browsers (or ignore)
}

    Кажется, что слово «хром» появляется в большинстве (если не во всех) пользовательских агентах хрома. Я обнаружил, что userAgentString.com также предоставляет список для предыдущих строк пользовательского агента более старых версий. .

    07.08.2012
    Новые материалы
    Ускоренный курс по жадным алгоритмам
    Дай мне, дай мне, дай мне Аудитория Эта статья предназначена для инженеров, достаточно хорошо разбирающихся в программировании, структурах данных и алгоритмах. Он в основном основан на..
    Изучайте Java (Урок 2: Комментарии)
    Как и зачем использовать комментарии в java с примерами Введение: Комментарии — это строки текста в программе Java, которые игнорируются компилятором и используются для добавления..
    Async Await в Swift: легкое управление параллелизмом
    Введение в запуск асинхронного кода Асинхронный код выполняет несколько операций одновременно. Параллелизм необходим при выполнении тяжелых вычислений или сетевых запросов. Однако это может..
    Очистить файлы Program .cache в Ubuntu 20.10
    Очистите кеш за несколько простых шагов! GNU / Linux реализовал эффективное управление хранилищем для своих пользователей. Но заметили ли вы, что в вашей системе Linux заканчивается место,..
    Использование Node.js для чтения действительно больших файлов (часть 1)
    В этом сообщении в блоге есть интересный источник вдохновения. На прошлой неделе кто-то на одном из моих каналов в Slack опубликовал тестовое задание, которое он получил на должность..
    Введение в градиентный спуск и обратное распространение
    Введение в градиентный спуск и обратное распространение Как машинное обучение? Машинное обучение ( ML ) - это исследование компьютерных алгоритмов, которые автоматически улучшаются по..
    Шаблон CQRS — C#
    Этот архитектурный шаблон в основном говорит о том, что мы можем использовать одну модель для операций чтения, а другую — для операций записи. Звучит хорошо, но реализовать его может быть..