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

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

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

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

Это известная проблема, которая имеет достаточно простое решение?


Рис. 1:

введите здесь описание изображения

Рис. 2.

введите здесь описание изображения


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

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

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

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

person Marty    schedule 16.09.2011    source источник
comment
Я должен сказать это: Таблицы для макета это ееееееееееееееееееееееееееееееее зло. stackoverflow.com/ вопросы/83073/, hotdesign.com/seybold, phrogz.net/css/WhyTablesAreBadForLayout.html   -  person Jon P    schedule 16.09.2011


Ответы (3)


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

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

Во-первых, установите «граница-коллапс: отдельно;»

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

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

Это должно привести вас к Chrome.

person Martinator    schedule 18.01.2013

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

Судя по всему, проблема в хроме заключается в colspan td, которые еще более вредны для макета таблиц.

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

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

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

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

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

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

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

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

person CBRRacer    schedule 16.09.2011

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

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

person c69    schedule 16.09.2011
comment
Спасибо за ответ, однако применение уникальных стилей к каждой из ячеек, чтобы не было столкновений границ, не является жизнеспособным решением в моей ситуации. - person Marty; 16.09.2011