IE6 CSS :hover fix [rus]

Главная > IT, css > IE6 CSS :hover fix [rus]

28 января 2010 WatchDog Написать комментарий К комментариям

Я думаю, Вам известно, что браузер IE6 самый "дырявый" и самый ничегонеподдерживающий =) Но как бы там ни было, его не перестаёт пользовать довольно таки большое количество веб-сёрферов… (статистика от студии Лебедева и tx3)

Я столкнулся со следующей проблемой: IE6 поддерживает селектор :hover далеко не для всех элементов HTML (пожалуй, только для <a>), но меню на сайте было построено на <ul><li> элементах, где использовался этот селектор для элемента <li>.

Решение #1: после некоторого времени гугления я нашёл решение, хоть и не тру-css, но тем не менее работает :)

Итак, в стилях нужно прописать:

html { behavior: url("hover.htc"); }
/* в оригинале файл называется csshover3.htc, а прикрепленный к посту hover.htc */

и положить вот этот вот файлик в корень сайта ) обновляем страницу, и "вуа ля" у нас работает селектор :hover для любого HTML элемента .

Хак грязный, да, но работает =)

PS: на всякий случай продублирую этот файл у себя

Решение #2: с использованием jQuery (решил уделить внимание, т.к. эта либа довольно активно пользуется разработчиками)

$.ie6CssFix = function() {
	if($.browser.msie && $.browser.version < 7) {
		var cssRules = [], newStyleSheet = document.createStyleSheet();
		$("style,link[type=text/css]").each(function() {
				if(this.href) {
					$.get(this.href,function(cssText) {
						parseStyleSheet(cssText);
					});
				} else {
					parseStyleSheet(this.innerHTML);
				}
		});
		function parseStyleSheet(cssText) {
			var cssText = cssText.replace(/\s+/g,'');
			var arr = cssText.split("}");
			var l = arr.length;
			for(var i=0; i < l; i++) {
				if(arr[i] != "") {
					parseRule(arr[i] + "}");
				}
			}
		}
		function parseRule(rule) {
			var pseudo = rule.replace(/[^:]+:([a-z-]+).*/i, '$1');
			if(/(hover|after|focus)/i.test(pseudo)) {
				var prefix = "ie6fix-";
				var element = rule.replace(/:(hover|after|before|focus).*$/, '');
				var className = prefix + pseudo;
				var style = rule.match(/\{(.*)\}/)[1];
				var h =  getPseudo(pseudo);
				if(h) {
					h(element,className);
				}
				newStyleSheet.addRule(element + "." + className,style);
			}
		}
	        function handleHover(e,c) {
			$(e).hover(function() {$(this).addClass(c);}, function() {$(this).removeClass(c);});
		}
		function handleFocus(e,c) {
			$(e).focus(function() { $(this).addClass(c); }).blur(function() {$(this).removeClass(c);});
		}
		function handleAfter(e,c) {
			$(e).after(
				$("<" + e + ">").addClass(c)
			);
		}
		function getPseudo(pseudo) {
			switch (pseudo) {
				case "hover": return handleHover;
				case "focus": return handleFocus;
				case "after": return handleAfter;
				default: return false;
			}
		}
	}
};

$(function() {
	$.ie6CssFix();
});

Всё! :) только перед этим кодом нужно сделать include скрипта jQuery :)