Chrome, CSS - макет, чувствительный к масштабированию

Question

Настроить:

У меня есть простое поле с закругленными углами, которое имеет заголовок и расширяется в соответствии с объемом текста, как обсуждалось в веб-дизайне Дана Седерхольма по пуленепробиваемым данным (ISBN 0-321-34693-9).

Прекрасно работает, за исключением масштабирования в Google Chrome. Тогда правый край коробки исчезнет.

Работает в IE и FireFox без проблем.

Пример:

Пример в jsFiddle

В хроме он не работает при увеличении 110% и других масштабах тоже. Нет проблем в IE или FireFox.

Вопросы:

1. Есть идеи, что вызывает это?

2. В общем, что делает макеты чувствительными к изменению масштаба (если такое общее правило существует...)?

3. Книга Дэна Седерхольма действительно пуленепробиваемая...?

Answer 1

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

1) Так что да, как уже упоминалось в комментариях под вашим постом, это просто округление ошибок в div, что обрезает фоновое изображение.

2) К сожалению, у меня нет источников, но по моему опыту, объекты, использующие текст в качестве измерения, чувствительны к масштабированию, изображения иногда не масштабируются относительно всего остального, а контент с заранее заданным "установленным" размером (например, текстовые поля, кнопки радио, так далее).

3) Ничто не является пуленепробиваемым, особенно с чем-то столь же постоянно меняющимся, как сеть, которая также ведет себя по-разному в разных браузерах. Опасности торговли.

Answer 2

Как далеко назад вы должны быть совместимы?

Я имею в виду, если вы можете отказаться от IE7/8, вы должны использовать css3 закругленные углы. Если вам нужно поддерживать IE8/7, вам определенно следует обратить внимание на постепенное снижение качества в этом случае. Вероятно, не стоит тратить время и силы на стремление к совершенству повсюду. Это просто цель, которую невозможно достичь, когда браузеры никогда не обновятся.

1) Что может быть причиной этого

Это довольно широкий вопрос, я не смог воспроизвести проблему или действительно найти ее в Chrome 20 (бета), поэтому я просто перечислю вещи, которые могут ее испортить.

• Общие ошибки округления браузера, браузеры не точные, не были разработаны, чтобы быть точным субпикселем
• Смешивая значения px с другими значениями, различные расчёты заставляют значения складываться по-разному.
• Расположение элементов потока, на которые влияют другие элементы потока на странице (обычно их трудно отследить)
• Свойства родительского элемента (например, родители со скрытым переполнением, фиксированные размеры, я думаю, что это может быть проблемой здесь, в jsfiddle)
• Ошибки в браузерах
• Сочетание вышеперечисленного

В этом случае у jsfiddle есть дурацкая загрузка контейнеров и фреймов (со скрытыми переполнениями, фиксированной высотой / шириной, на основе пикселей) и т. Д. На странице, даже в полноэкранном режиме. Так что если вы действительно хотите убедиться, сделайте HTML-файл на вашем компьютере открытым / протестируйте с этим.

2) В общем, что делает макеты чувствительными к изменению масштаба (если такое общее правило существует...)?

В современных браузерах это может быть не так уж важно, потому что функция масштабирования часто очень продвинута и может даже масштабировать макеты на основе полного пикселя без особых проблем. Единственный реальный проблемный браузер, который все еще используется сегодня, это IE7. Возможность масштабирования в IE7 ужасна, и по этой причине вы должны использовать только значения, основанные на% или em, для текста.

Единственные "официальные" связанные руководящие принципы можно найти в WCAG 2.0, описание рекомендаций / методов доступности w3:

• http://www.w3.org/TR/WCAG20-TECHS/G142.html

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

3) Действительно ли книга Дэна Седерхольма пуленепробиваема?

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

Давайте начнем с "Что такое пуленепробиваемый?". Пуленепробиваемый в веб-дизайне означает, что он будет работать везде и не сломается нигде. Одно это должно дать вам подсказку.

Когда он написал эту книгу, он мог бы быть пуленепробиваемым, но Интернет - это динамичное место, и даже если я возьму последнее объявление в блоге для книги, датированной декабрем прошлого года. С тех пор вышло не менее 3 новых версий Chrome (приблизительная оценка) и еще больше версий Firefox. На этот раз Microsoft уселась на задницу (у нас были бы большие неприятности, если бы они решили сделать графики быстрого выпуска).

Ситуация изменилась, с тех пор определенно появились новые ошибки.

Независимо от того, что его нарушает, ничто не является пуленепробиваемым, просто очень, очень близко к тому, что вы хотите, чтобы всегда происходило, с небольшими различиями между браузерами.

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

A: "You always use EMs for text! EMs are annoying! Why do you do that anyway?!"
B: "I dunno, read somewhere I should..."
A: "Lets just use pixels! Pixels always work."
B: "Hmmm ok."

Вы только что потеряли поддержку IE7. (будь то плохо, другое обсуждение)