Можно ли использовать zoom: 1 в моих классах CSS?

Question

Всякий раз, когда я нахожу, что IE отображает мой веб-сайт странно (отличается от chrome и firefox), я пытаюсь вставить zoom:1 в класс css для части, которая отображается странно. В большинстве случаев это решает проблему и делает ее похожей на другие браузеры.

Является ли проблемой использование zoom:1? Я знаю, что мой CSS не будет проверяться, но есть ли реальные проблемы, которые могут возникнуть, если я слишком полагаюсь на использование zoom:1?

Answer 1

Проблема, с которой вы боретесь, это проблема IE hasLayout. Здесь - хорошая статья и обзор, в которых свойства также вызывают «иметь макет» в IE.

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

Однако, конечно, есть небольшой шанс, что zoom когда-нибудь станет настоящим CSS-свойством - или будет использован в другом проприетарном контексте, таком как на iPad или чем-то еще - что может привести к поломке.

Действительно чистое решение, масштабирование - нет. Если это вообще возможно, рекомендуется добавить элемент «Макет» другим способом, как описано в статье.

Answer 2

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

См .: http://dev.w3.org/csswg/css-device-adapt/ или http://www.w3.org/TR/css-device-adapt/

Answer 3

Наоборот, есть определенные недостатки использования zoom: 1, даже в IE. Обычно я включаю его только в таблицы стилей только для IE, но даже в последние несколько дней я сталкивался с некоторыми проблемами с макетом, потому что решил использовать * {zoom: 1;}

- еда на вынос - используйте его на ограниченной основе. Если вы заботитесь только о IE7 +, вы можете использовать min-height: 1%, что имеет тот же эффект, что и запуск hasLayout

Answer 4

display: inline-block; делает то же самое, но является стандартным кодом.

В случае редко возникает проблема, вы можете использовать

display: block !important; /* or inline, etc. */ 
display: inline-block; /* in this order */

, чтобы отправить ее только в старые версии Internet Explorer, для которых это полезно.1009 *

Answer 5

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