Deerua about Coding -> Заметки с тегом «microsoft»

Досадная штука этот ИЕ6. Стал забывать о нём (и не зря, за 2 года упал с 65% до 11%), но он всегда вылазит где-то %) И нужно с ним бороться, опять и опять.

В этот раз все банально просто, блок непосредственно в боди, с {positon:absolute­}, становится длиной 100% и просто поверх всего. После долго-го рытья по гуглу, оказывается что нужно сделать body{positon:relative­}, и только тогда он начинает себя нормально вести :)

За одно исправил свой HabraAlert, теперь он 0.1.1 :)

1. Не работает центрирование с margin: 0 auto; — используем text-align
2. Видишь лесенку блоков, двойной margin, в фоне списков проблемы — display: inline;
3. Минимальная высота блока не минимальна — font-size: 0; или overflow: hidden;
4. Overflow не работает — position: relative;
5. Не кушает padding — используй хак для высоты или ширины
6. Не работает min-height — height:auto !important; height: yourminheight px;

var is_ie6 = (window.external &&
typeof window.XMLHttpRequest == "undefined");

Перерыл пол интернета в поисках этого «пнгфикса», вариаций более-менее достойных было с 10, но на сложной вёрстке они убивали дизайн полностью, и фиксили не до конца, кроме одного!

Представляю, это DD_belatedPNG (сейчас версия 0.0.7альфа но он уже может всё!) и как они говорят, это «Medicine for your IE6/PNG headache!»

• Скачать DD_belatedPNG

Что же он может:

• фиксить все png, как просто картинки (<img>) так и динамически вставляемые;
• фиксить все фоновые png (как одиночные так и повторяющиеся) для любых тегов, при этом нормально обрабатывается background-position and background-repeat;
• фиксить инпут в виде картинки (<INPUT type=«image»/>);
• Автоматически добавляет позишон:релейтив (для ИЕ6 очень важно);
• не использует картинки (blank1px.gif) для фиксов и технологию ДиректИкса (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader), то есть нужен только джаваскрипт! Использует технологию MS, что называется VML (//Vector Markup Language//);
• после фикса, у всех элементов сохраняется кликабельность;
• не нужно уродовать css с помощью **behavior: url**
• + он фиксит :hover для ИЕ6!

Есть одно но! К тегам <TR> и <TD> лучше не применять ;) да и вообще кому нужна вёрстка на таблицах ;)

Рецепт:
Скачайте Джаваскрипт, положите в корень сайта например и подключаете

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

Подключаете только для ИЕ6, и только для нужных элементов! Оптимизирован для ИЕ6! Может выбирать как по классам, так и по айди, так и просто по тегам, кому как удобно! Например я использовал такое подключение %) DD_belatedPNG.fix(’img, div, li, a’);, так как дизайн был полностью из пнгшек!

зы: DD_belatedPNG is free software under the MIT License.
ззы: Кто не хочет нагружать страницу каким-либо джаваскриптом, для того есть ещё один метод, и называется он

• PNG8 с альфа каналом.

Есть на свете браузер клёвый ИЕ (кИЕ) и хорошая контора Microsoft, и любит эта контора в свой кИЕ напихать функций нестандартных, вот одина из них «removeNode». По хорошему должна быть функция removeChild :) , но что делать, если нужно поддержать какой нить огромный проект, типа Битрикс, что очень любит фишечки с кИЕ :) Для этого можно в прототайп добавить небольшую обёрточку, и жизнь станет на порядок легче ;)

if(window.HTMLElement){
  HTMLElement.prototype.removeNode = function(removeChildren) {
    if (Boolean(removeChildren) )
      return this.parentNode.removeChild(this);
    else {
      var r=document.createRange();
      r.selectNodeContents(this);
      return this.parentNode.replaceChild(r.extractContents(),this);
    }
  }
}

зы: Это же касается чудесных кИЕ методов для options.remove

JavaScript setAttribute «class» not work in IE

//Хорошо работает везде, кроме ИЕ - good for all but not IE
setAttribute(’class‘, ‘value’);
//в ИЕ работает вот так - IE only
setAttribute(’className‘, ‘value’);
//везде работает вот так ;) - good for all browsers
someElement.className = ‘value’;