CSS calc не работает в Safari и резервном

У меня есть этот макет, над которым я работаю. Это сильно зависит от CSS calc для выполнения необходимых вычислений.

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

теперь я не могу заставить это работать в Safari. Я что-то делаю не так?

а также, есть ли способ ввести механизм отката для браузеров, которые его не поддерживают? Процент не будет делать хорошую работу, так как я должен вычесть объект в середине, из двух на сторона.



спасибо.

24
css fallback html safari

2 ответов

то, как я решил эту проблему, представляет собой чистый CSS-откат, что старые браузеры, которые не поддерживают CSS calc, будут только читать.

figure.left {
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

левая и правая панели получают ширину 48%, Если браузер не может прочитать значения calc.

figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

и логотип, который сидит между двумя панелями, получает шириной 4%. А также минимальная ширина 40px. И если значения calc могут быть прочитаны браузером, то они 40px.

35

Вы код выглядит нормально, поэтому я думаю, что проблема в совместимости браузера. Согласно Документация Mozilla, эта функция работает в Chrome, Firefox и IE (более новые версии), но отсутствует в Opera и глючит в Safari. этот вопрос для получения дополнительной информации о совместимости. Гораздо более безопасным резервным вариантом / альтернативой было бы выполнить ваши вычисления в Javascript:

if ($(document).width() >= 750){
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
  // do something here for smaller values
}

можно использовать jQuery .width() функция обнаружения ширина документа, затем установите ширину ваших элементов соответственно. Но просто предупреждаю вас, старайтесь держать как можно больше стилей вне ваших сценариев и внутри ваших таблиц стилей, потому что иначе это будет недостижимо.

если он все еще не работает в некоторых браузерах, используйте Modernizr чтобы обнаружить браузер / версию / ОС, а затем перенаправить их на другую версию страницы.

Edit 1: добавил отзывчивость
изменить 2: Удалены Интервал
Edit 3: добавлено упоминание о модернизации

2