CSS Border-collapse в сочетании с пунктирной границей - PullRequest
Новая
       64

CSS Border-collapse в сочетании с пунктирной границей

3 голосов
/ 16 сентября 2011

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

В целом работает нормально, но естьнебольшая проблема в Chrome, где две свернутые пунктирные границы иногда образуют одну сплошную границу (рис. 1);Пример этого можно найти на странице Сигнатуры внизу.

Аналогичный эффект применим и к Internet Explorer, однако он более последовательный, а не сплошная линия.как каждая n th точка удваивается (рис. 2).

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

Fig1:

enter image description here

Fig2:

enter image description here

Обратите внимание на меняиспользование таблиц для этого

Пожалуйста, не рассылайте мне спам с «вы не должны использовать таблицы для макетов» - я полностью осознаю это.

Есть несколько основных причин, по которым яЯ делаю это:

  1. Сайт построен в Business Catalyst (система управления контентом), и клиент должен иметь возможность легко добавлять ячейки для дополнительного контента и т. д. с помощью редактора WYSIWYG вsystem.
  2. Этот конкретный проект имеет чрезвычайно сжатые сроки и поэтому должен быть построен как можно быстрее(таблицы делают это немного быстрее, особенно на всех страницах с разным количеством ячеек, шириной, высотой и т. д. и т. д.).

Ответы [ 3 ]

4 голосов
/ 18 января 2013

border-collapse - ваш виновник.

Я столкнулся с этой проблемой с пунктирной нижней границей - это таблица (на самом деле это была таблица, а не макет).

Сначала установите «border-collapse: Отдельный»;

Все, что с рамкой, установите границу;

Затем установите ширину границы на 0px для всего, что неиметь границу.

Это должно помочь вам в Chrome.

1 голос
/ 16 сентября 2011

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

Судя по всему, проблема в chrome заключается в том, что у td's еще больше зла для размещения таблиц.

Рекомендация:

Не используйте colspan внизу, просто стилируйте конкретную рамку слева: нет; Для первого лица создайте новую таблицу и установите ширину в этой таблице равной ширине исходной таблицы, установите ширину последнего столбца как в новой таблице, так и в исходной, а затем убедитесь, что вы установили border-top: none для первого ряда исходной таблицы.

Или еще лучше преобразовать в макет div. Если вы заинтересованы в конвертации, дайте мне знать, я почти уверен, что смогу это сделать примерно через 20-30 минут.

Что касается IE, то все выглядит хорошо в IE9 в режиме по умолчанию, в режиме совместимости (IE8), похоже, возникла проблема с первым colspan внизу.

/ --- РЕДАКТИРОВАТЬ --- /

Если вы разрешаете клиенту изменять код (что вполне приемлемо), то у вас действительно есть только пара опций, поскольку это проблема рендеринга в браузерах.

  1. Добавить файл javascript на сайт или добавить код javascript в файл .js на сайте, который анализирует DOM и добавляет стиль к любому td с атрибутом colspan, который обрабатывает границу;
  2. Создать токен для любого случая, когда клиент хочет использовать colspan (не идеально);
  3. Сообщите им, в чем проблема, и переключитесь на сплошную границу;
  4. Не используйте границы, используйте изображение с точками в стиле спрайта

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

0 голосов
/ 16 сентября 2011

Установите border-top и border-left, чтобы они были расставлены пунктиром 1px, а справа и снизу - нет. Затем добавьте правую и нижнюю границу к контейнеру.

p.s .: не используйте таблицы для разметки, если только вы не размечаете настоящую таблицу! он очень плохо влияет на скорость рендеринга, его НЕ кросс-браузерный (вопреки тому, что большинство людей думают и говорят) и его трудно поддерживать.

...