Я использовал функцию CSS3 с несколькими столбцами, используя свойство column-count для разделения на несколько столбцов.
Он не работает на моей версии Firefox или Firefox developer Edition. Код работает на: Google Chrome, Opera и Microsoft Edge.
Это ошибка или есть какое-то решение?
3 ответа
SUMMARY Я использую свойство column-count CSS для создания макета, подобного pinterest. Но из-за column-count , если я вставлю Youtube в , этот iframe исчезнет. Можете ли вы сказать мне, почему он исчезает? DETAILS Я следую этому примеру для моего макета сетки. Это хорошо работает.
Мне пришлось работать над чем-то подобным несколько лет назад, и, насколько я помню, поддержка кросс-браузеров не была пуленепробиваемой (особенно с более старыми браузерами), но это должно работать довольно хорошо.
Поместите column-break в контейнер за пределами тега ul . Кроме того, в случае, если вам придется работать над более сложными макетами, может быть полезна куча дополнительных свойств break (см. li ).
Протестировано с последними Firefox, Chrome, Safari на Mac.
Примечание: Использование flexbox, вероятно, даст вам лучший результат и более современное решение. Стоит попробовать, если ваш проект может использовать flexbox.
Firefox версии 55-59 имеют частичную поддержку этой функции:
Частичная поддержка относится к отсутствию поддержки свойств break-before , break-after , break-inside . WebKit — и браузеры на основе мигания есть эквивалентная поддержка нестандартных свойств -webkit-column-break-* для достижения того же результата (но только значений auto и always ). Firefox не поддерживает break-* .
Вам нужно будет опубликовать фрагмент кода, отображающий вашу проблему, если вам потребуется дополнительная помощь.
вам нужно добавить -moz-column-gap: 50px для ul или основного контейнера. Это исправит проблему для firefox.
Похожие вопросы:
Я попытался прочитать количество столбцов из атрибута HTML. Что-то вроде этого: div.columns[cols] < column-count: attr(cols) -webkit-column-count: attr(cols) /* Chrome, Opera, Safari */.
Когда я использую свойство column-rule в FF, это выглядит так, как будто разделительная линия столбца состоит из 2 цветов. В Хроме это выглядит прекрасно. Как я могу добиться такого результата, как.
Я добавил ссылку на файл Modernizr JS и поместил в тег html . , этот iframe исчезнет. Можете ли вы сказать.
Я пытаюсь сделать многоколоночный макет для формы с несколькими парами меток и входных данных. Он отлично работает в Chrome и IE , но я не могу заставить его работать с Firefox. ( демонстрация.
У меня есть HTML ul , который я генерирую динамически с помощью JavaScript. После того как я сгенерирую его, я установлю стиль на указанном ul , используя метод JQuery $(‘#id’).css(‘property’,value).
У меня есть следующий простой документ. Я пытаюсь использовать column-break-before. Однако это не работает. Я не понимаю, почему это не работает. .newspaper < -webkit-column-count: 3; /* Chrome.
Я пытаюсь разбить список на несколько столбцов, как только один из них превышает высоту родителя ( ul ), и я пытаюсь сделать это с помощью свойства column-count , но это, похоже, не работает, так.
Источник
Свойство Column-Count не работает в Firefox
Я использовал многостолбцовую функцию CSS3, используя свойство column-count для разделения на несколько столбцов.
Он не работает с моей версией Firefox или версией Firefox для разработчиков. Код работает на: Google Chrome, Opera и Microsoft Edge.
Это ошибка или есть какое-то решение?
3 ответа
Мне пришлось работать над чем-то похожим несколько лет назад, и, насколько я помню, кросс-браузерная поддержка не была пуленепробиваемой (особенно в старых браузерах), но это должно работать довольно хорошо.
Поместите column-break в контейнер вне тега ul . Кроме того, в случае, если вам нужно работать с более сложными макетами, может оказаться полезным множество дополнительных break свойств (см. li ).
Протестировано с последними версиями Firefox, Chrome, Safari на Mac.
Примечание. Использование flexbox, вероятно, даст вам лучший результат и более современное решение. Это стоит попробовать, если ваш проект может использовать flexbox.
Firefox версии 55-59 частично поддерживают эту функцию:
Частичная поддержка означает отсутствие поддержки break-before , Свойства break-after , break-inside . Браузеры на базе WebKit и Blink есть эквивалентная поддержка нестандартного -webkit-column-break-* свойства для достижения того же результата (но только auto и always ценности). Firefox не поддерживает break-* .
Вам нужно добавить -moz-column-gap: 50px для ul или основного контейнера. Это исправит проблему для Firefox.
Источник
Свойство Column-Count не работает на Firefox
Я использовал функцию CSS3 с несколькими столбцами, используя свойство column-count для разделения на несколько столбцов.
Он не работает на моей версии Firefox или Firefox developer Edition. Код работает на: Google Chrome, Opera и Microsoft Edge.
Это ошибка или есть какое-то решение?
3 ответа
SUMMARY Я использую свойство column-count CSS для создания макета, подобного pinterest. Но из-за column-count , если я вставлю Youtube в , этот iframe исчезнет. Можете ли вы сказать мне, почему он исчезает? DETAILS Я следую этому примеру для моего макета сетки. Это хорошо работает.
Мне пришлось работать над чем-то подобным несколько лет назад, и, насколько я помню, поддержка кросс-браузеров не была пуленепробиваемой (особенно с более старыми браузерами), но это должно работать довольно хорошо.
Поместите column-break в контейнер за пределами тега ul . Кроме того, в случае, если вам придется работать над более сложными макетами, может быть полезна куча дополнительных свойств break (см. li ).
Протестировано с последними Firefox, Chrome, Safari на Mac.
Примечание: Использование flexbox, вероятно, даст вам лучший результат и более современное решение. Стоит попробовать, если ваш проект может использовать flexbox.
Firefox версии 55-59 имеют частичную поддержку этой функции:
Частичная поддержка относится к отсутствию поддержки свойств break-before , break-after , break-inside . WebKit — и браузеры на основе мигания есть эквивалентная поддержка нестандартных свойств -webkit-column-break-* для достижения того же результата (но только значений auto и always ). Firefox не поддерживает break-* .
Вам нужно будет опубликовать фрагмент кода, отображающий вашу проблему, если вам потребуется дополнительная помощь.
вам нужно добавить -moz-column-gap: 50px для ul или основного контейнера. Это исправит проблему для firefox.
Я пытаюсь сделать многоколоночный макет для формы с несколькими парами меток и входных данных. Он отлично работает в Chrome и IE , но я не могу заставить его работать с Firefox. ( демонстрация проблемы ). я попытался удалить clear: left на label , но это не помогло. Вот упрощенный HTML.
Свойство column-count не влияет на таблицу. HTML:
Key
Value
Key
Value
Key
Value
.
Похожие вопросы:
Я попытался прочитать количество столбцов из атрибута HTML. Что-то вроде этого: div.columns[cols] < column-count: attr(cols) -webkit-column-count: attr(cols) /* Chrome, Opera, Safari */.
Когда я использую свойство column-rule в FF, это выглядит так, как будто разделительная линия столбца состоит из 2 цветов. В Хроме это выглядит прекрасно. Как я могу добиться такого результата, как.
Я добавил ссылку на файл Modernizr JS и поместил в тег html . , этот iframe исчезнет. Можете ли вы сказать.
Я пытаюсь сделать многоколоночный макет для формы с несколькими парами меток и входных данных. Он отлично работает в Chrome и IE , но я не могу заставить его работать с Firefox. ( демонстрация.
Свойство column-count не влияет на таблицу. HTML:
Key
Value
.
У меня есть HTML ul , который я генерирую динамически с помощью JavaScript. После того как я сгенерирую его, я установлю стиль на указанном ul , используя метод JQuery $(‘#id’).css(‘property’,value).
У меня есть следующий простой документ. Я пытаюсь использовать column-break-before. Однако это не работает. Я не понимаю, почему это не работает. .newspaper < -webkit-column-count: 3; /* Chrome.
Я пытаюсь разбить список на несколько столбцов, как только один из них превышает высоту родителя ( ul ), и я пытаюсь сделать это с помощью свойства column-count , но это, похоже, не работает, так.
Источник
CSS3: column-count в Firefox
Кто-нить в курсе, почему column-count в Firefox (и стандарте?) неприменим к ячейкам таблицы? Чем вызвано такое ограничение?
Opera и Chrome column-count для ячеек таблиц поддерживают нормально:
column-count применим только для блочных элементов (display: block/list-item/table). О причине стандарт молчит, есть лишь подозрение, что это как-то связано с контекстом форматирования блока (который block formatting context в спецификации) и с тем, что ячейки таблицы не являются principal block-level box.
А если запихнуть туда div и на него уже? С таблицами вообще каких только странных исключений не бывает…
А если запихнуть туда div и на него уже?
Тогда работает. Так и делаю сейчас. Просто было интересно, чем td не угодил 🙂
Точнее, чем не угодил именно Фоксу, так как в Опере и Хроме — работает.
Фокс и позиционировать яйечки не может, насколько я помню. Что-то в духе «в стандарте непонятно вот мы и не делаем ничего». Подозреваю, что тут тоже какая-нибудь такая петрушка.
Источник
Column-Count Property is not working on Firefox
Я использовал многостолбцовую функцию CSS3, используя column-count свойство разбить на несколько столбцов.
Это не работает в моей версии Firefox или в версии для разработчиков Firefox. Код работает на: Google Chrome, Opera и Microsoft Edge.
Это ошибка или есть какое-то решение?
2 ответа
Я должен был работать над чем-то похожим несколько лет назад, и, насколько я помню, кросс-браузерная поддержка не была пуленепробиваемой (особенно в старых браузерах), но это должно работать довольно хорошо.
Положить column-break в контейнере за пределами ul тег. Кроме того, в случае, если вам нужно работать над более сложными макетами, куча дополнительных break свойства могут быть полезны (см. li ).
Протестировано с последними версиями Firefox, Chrome, Safari на Mac.
Примечание. Использование flexbox, вероятно, даст вам лучший результат и более современное решение. Это стоит попробовать, если ваш проект может использовать flexbox.
Firefox версии 55-59 частично поддерживают эту функцию:
Частичная поддержка означает не поддержку break-before , break-after , break-inside свойства. Браузеры на базе WebKit и Blink имеют эквивалентную поддержку нестандартных -webkit-column-break-* свойства для достижения того же результата (но только auto а также always ценности). Firefox не поддерживает break-* ,