Хинты по вёрстке. Для тех, кто не знал.

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

  1. Если используется XHTML 1.1 Transitional в IE, а на странице есть таблица с height 100%, а в ней хедер и контент, и в контент-зоне еще одна таблица с высотой 100%, то вложенная таблица становится по высоте равной viewport’у браузера.
  2. -moz-box-sizing применяется только в случае, если страница рендерится в режиме совместимости. В остальных случаях это не дает эффекта, так как IE в режиме XHTML поддерживает блочную модель W3C. Подробнее о режиме совместимости здесь: Quirks_mode
  3. Если указываем в начале файла конструкцию, подобную <?xml version=”1.0″ encoding=”utf-8″?>, то IE работает в режиме совместимости, который нам нафиг не нужен (зачем, на самом деле?). Кроме того, если перед объявление DOCTYPE есть что-либо кроме пробелов, то IE будет работать в режиме совместимости! Но в этом случае пригодится -moz-box-sizing, чтобы сделать поведение блоков одинаковым в обоих браузерах (Опять же, это костыль, лучше использовать XHTML).
  4. Определить, находится ли браузер в режиме совместимости можно, запустив на странице Javascript код alert(document.compatMode). Если появится сообщение “BackCompat” - браузер в режиме совместимости.
  5. В блочной модели W3C к ширине блока прибавляются границы (margin), бордюр (border) и отступы (padding). Поэтому, при наличии бордюров, границ или отступов, если вы хотите, чтобы сохранилась старая ширина блока, нужно отнять эти границы, отступы и бордюры от ширины блока. То, что получится - будет новой шириной блока.
  6. Забиваем на IE 5.+, больше не понадобятся хаки типа w\idth:228px от Tantek Celik’a. Хватит уже поддерживать старые браузеры и тянуть за собой старое дерьмо.
  7. Если в родительском неплавающем блоке лежит плавающий блок, то, чтобы родительский блок растянулся по размерам дочернего блока, надо родительскому блоку установить overflow: hidden. В IE это лечится установкой родительскому блоку свойтва hasLayout ( zoom: 1 или height: 1%), или установкой родительскому блоку ширины (что тоже устанавливает блоку свойство hasLayout).
  8. Максимальную и минимальную ширину сайта в IE можно сделать так:
    width: expression((w = (document.documentElement.clientWidth || document.body.clientWidth) - 20) > 800 ? ‘800px’ : (w > 400 ? ‘auto’ : ‘400px’));
    /* Число “20″ в формуле - величина горизонтального padding’а document.body (если он есть) */
  9. Если что-то глючит в ИЕ - следует прочитать: http://cssing.org.ua/2005/11/11/ie-magic/ и глянуть http://www.positioniseverything.net/ie-primer.html а так же http://www.positioniseverything.net/articles/ie7-dehacker.html

Also interesting

  • No Related Post

Leave a Reply