Вопросы с тегом «css»

Чтобы заполнить всю высоту страницы, я использую height: 100%;теги html и body, и она работает нормально, пока браузер не будет закрыт и снова открыт. (Я не использую 100vh из-за проблем на мобильных устройствах https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html ) Действия по воспроизведению: Откройте https://angelika94.github.io/rick/ в Google Chrome на iPhone (вы увидите, что навигация …

10 html  css  height  google-chrome-app 

Проблема: я использую katex для отображения математики на странице. Затем я хочу создать PDF-версию части этой страницы, поэтому я создаю HTML-документ, содержащий экспортируемую часть, которая включает весь CSS-код и передает его в средство визуализации. Рендер не может получить доступ к ресурсам узла, поэтому все встроено. Работает отлично, кроме шрифтов. Я …

10 javascript  css  webpack  data-uri 

Начиная с выпуска Chrome v78.0.3904.70, я вижу проблемы с использованием  со свойством CSS white-space: nowrap;. Кажется, что неразрывный пробел вызывает разрыв строки. При использовании text-overflow: ellipsisфактический текст не будет отображаться, поскольку он разбит за пределами контейнера. Кажется, только если текст слишком длинный для отображения. .box-inline { max-width: 120px; overflow: hidden; …

10 html  css  google-chrome  whitespace 

После небольшой части моего кода. Просто интересно узнать, почему ячейка "iphone" мигает только от iphone. PS. Я не могу использовать таблицу или список для структуры. Я также пытался использовать transform: translate3d(0,0,0);. По сути, мне нужно, чтобы первая ячейка была липкой как для левой, так и для верхней части на iPhone …

10 html  css 

У нас есть приложение электронной коммерции, которое отправляет детали заказа при совершении покупки, и мы только что переработали этот шаблон электронной почты. За последние несколько дней мы получили сообщения о том, что у некоторых клиентов половина текста пропущена. Наконец, получив скриншот, мы узнали, что проблема возникает на iPhone в темном …

10 ios  css  email  gmail  ios-darkmode 

Несмотря на то, что <meta name="viewport">тег нестандартный, он «уважается большинством мобильных браузеров благодаря фактическому доминированию». Недостатком того, что веб-стандарт не является настоящим, является то, что подробная документация не так доступна, как другие стандарты. Рабочая группа CSS имеет спецификацию для этого, так это то , что я в основном с использованием …

9 css  viewport  meta-tags  meta 

У меня есть элемент контейнера, который содержит несколько других элементов, но в зависимости от размера экрана их части необъяснимым образом обрезаются на разные части. Вы можете наблюдать за поведением по моей ссылке в песочнице кода, когда HTML-страница настраивается по ширине (нажав и перетащив ее). Как я могу убедиться, что отображается …

9 javascript  css  reactjs 

Я кодировал скрипт (с помощью пользователя здесь), который позволяет мне расширять выбранный div и заставлять другие div вести себя соответствующим образом, растягивая в равной степени, чтобы соответствовать оставшемуся пространству (кроме первого, ширина которого фиксирована). И вот картина того, чего я хочу добиться: Для этого я использую flex и переходы. Это …

9 javascript  jquery  css  flexbox  css-transitions 

Я поставил перед собой задачу создать визуально динамичный и интерактивный опыт только в HTML и CSS (без Javascript). До сих пор я не сталкивался ни с одной необходимой мне функцией, которую не мог бы сделать в чистом CSS и HTML. Этот, возможно, немного сложнее. Мне нужно , чтобы пользователь с …

9 html  css 

Отображение галереи изображений различных размеров и соотношения со следующими характеристиками: Нет пробелов (полей) между изображениями. Соблюдайте оригинальное соотношение в максимально возможной степени. Изображения окружены ссылкой. Решение не JS. Изображения могут быть обрезаны немного. Портативное решение. Набор отображаемых изображений является случайным. Изображения должны отображаться слева направо (предотвращает использование столбцов). Я добился …

9 css  flexbox  image-gallery 

Я сделал оболочку, в которой я анимировал тот же эффект, что и Apple, на их странице Airpods Pro . Это в основном видео, когда я прокручиваю видео по частям. Положение видео фиксировано, поэтому текст хорошо прокручивается. Однако текст виден только между смещением определенного деления (отображение текста). Эта часть отлично работает. …

9 javascript  jquery  html  css 

Я создал анимацию карты сокровищ, во-первых, она будет отображать путь светло-серым, но когда анимация начинается, я бы хотел, чтобы светло-серые штрихи исчезли или превратились в черный цвет, когда анимация заливки «.road» включается. изо всех сил пытаясь заставить светло-серые штрихи ".steps" исчезнуть, когда анимация заливки проходит над этой позицией. svg { …

9 css  svg 

Мне нужно построить карусель из 12 предметов, которые имитируют бесконечное вращение 3-го колеса. Чтобы было понятно, мне нужно создать именно этот эффект: https://codepen.io/SitePoint/pen/yXWXaw (находится здесь ) но с этими функциями добавления (особенно для настольных компьютеров и мобильных устройств): Слайды должны следовать шаг за шагом, то есть слайды должны двигаться во …

9 javascript  css  carousel  swiper 

У меня есть приложение, в котором я использую Material UI и его поставщика тем (используя JSS). Сейчас я включаю fullcalendar-response , который на самом деле не является полноценной библиотекой React - это всего лишь тонкая оболочка компонента React вокруг исходного кода fullcalendar. То есть, у меня нет доступа к таким …

9 css  reactjs  fullcalendar  jss 

У меня есть «сортируемая» таблица, где в заголовке сортируемого в данный момент столбца отображается значок: Значок сортировки должен отображаться в конце текста (т. Е. Мы поддерживаем LTR / RTL). Я сейчас пользуюсь display:flex. Однако, если ширина таблицы уменьшается и текст заголовка столбца начинает переноситься, я сталкиваюсь с неоднозначными состояниями, когда …

9 html  css  layout  html-table  alignment