Задать вопрос

ZaxapKramer

Больной верстальщик
Ответы пользователя по тегу CSS

  • Почему rem'ы работают так при размере шрифта в html в процентах (в Chrome)?

    @ZaxapKramer Автор вопроса
    Больной верстальщик
    Ранние попытки решить проблему.
    Как уже заметили (спасибо большое за это) данная проблема замечена только в Chrome.
    Придумал задать стили вот так, работает, как ни странно:
    html {
  font-size: calc(6.25% + 1px - 1px) /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
  /* 6.25% + 1px - 1px = 6.25%, логично, забавно */
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 16px */
}


    Либо так - тоже работает:
    html {
  font-size: calc(6.25% + 0px) /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
  /* 6.25% + 0px = 6.25%, все также логично, только еще проще и "страннее" */
}


    P.S. В IE оно каким-то боком крашится: font-size: 0.3px. Даже font-size: calc(6.25%), который везде равен 6.25% (в хром, конечно же, не меньше 6px), равен там 0.3px.

    P.P.S. Данный хак можно применить только для Chrome (webkit) одним из таких способов:
    browserhacks.com/#ch


    Окончательное решение было найдено совершенно случайно. От части, на просторах интернета, от части, из проб и ошибок при попытках решить проблему.
    /* Использование em вместо % */
html {
  font-size: 6.25%; /* (font-size: .0625em) на всякий случай */
  font-size: calc(1em * .0625)
}

    Почему не .0625em? Это объясняется багом в IE, в котором единицы высчитываются неверно.
    В добавок, таким образом исправляется баг (фича) в webkit-браузерах, описанный подробнее в ответе Ankhena W, за что ей спасибо.

    Теперь мы можем использовать rem подобно px! Just use It!
    Ответ написан
    Комментировать
    Комментировать

  • Как запретить скролл body при окрытом модальном окне?

    @ZaxapKramer
    Больной верстальщик
    Обычно при помощи js для body задается overflow: hidden
    или class="scroll-hidden" (где .scroll-hidden { overflow: hidden }).
    Ответ написан
    3 комментария
    3 комментария

  • Вертикальное позиционирование дочернего элемента с position:relative;top:(some)%, почему не работает?

    @ZaxapKramer Автор вопроса
    Больной верстальщик
    Сергей написал в комментариях:
    Если у элемента не задана высота, то процент от чего брать? =)
    Не работают проценты высоты, без явного ее указания родителю.
    Ответ написан
    Комментировать
    Комментировать

  • Как выравнивать текст и иконку по фен шую?

    @ZaxapKramer
    Больной верстальщик
    Если в Вашем случае все работает, значит, этого достаточно. Нет ничего такого в этом:)
    Ответ написан
    Комментировать
    Комментировать

  • Есть ли способ задать пользовательские стили тегу audio через css?

    @ZaxapKramer
    Больной верстальщик
    Может, немного не по теме, но почему бы не использовать библиотеку Audio.js?
    Все приводится к общему виду, так или иначе. А это - именно то, что Вам нужно.

    P.S. Отображение плеера в тех же Chrome и Firefox слишком разнится, чтобы просто стилями пытаться приводить их к общему виду - мое мнение.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как присвоить класс через js?

    @ZaxapKramer
    Больной верстальщик
    На JavaScript? Так:
    document.querySelector(".story .link .highslide").classList.add("link link_ajax link_theme_normal", "story__image gw9wsja80d4pldi__image i-bem");

    Либо так, если элементов несколько:
    [].forEach.call(document.querySelectorAll(".story .link .highslide"), function(el){
    el.classList.add("link link_ajax link_theme_normal", "story__image gw9wsja80d4pldi__image i-bem");
});
    Ответ написан
    Комментировать
    Комментировать