Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний "телодвижений". Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо ...
Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня – это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет ...
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Что-то много в последнее время мне глаза попадается информации, касаемой браузеров и поддержки ими стандартов. И мне это обстоятельство несомненно очень даже нравится. На хабре рассказали о том, что ожидаемая ...
В очередной раз хочется затронуть тему CSS-хаков. Только не подумайте, что я заядлый CSS-хакер :), дело в моем стремлении все упрощать. Так вот, для себя я выделил альтернативу условным комментариям, ...
Комментарии (114)
Опубликуйте, пожалуйста, ещё вот эти хаки для Webkit-браузеров:
www.ridev.ru/T2
www.ridev.ru/Tq
Спасибо! Очень часто пользуюсь этой страничкой и хорошо, что она всегда вверху в выдаче гугла.
Они не персональные, поэтому не подходят.
Но ведь теоретически (!) не может быть различных хаков для chrome и safari, они же на одном движке. Один браузер по-сути. Может в следующих версиях ситуация изменится, конечно…
Спасибо за huck для Opera…
*+color:#fff;
-этот хак видит только ИЕ7
привет всем!
понимаю, что немного не в той весовой категории с вами….
так как я не программер, но делаю сайты для себя и своего бизнеса!
есть проблема с css в опере!
вот ссылка – www.komarovskiy.kiev.ua – на главной странице в опере не работает функция флоат.
в других броузерах все ок! а в опере фигня выходит!
да и хотел спросить – что такое эти хаки?
куда их нужно вставлять!
я так понимаю, что если вставлю хак для оперы в код, то все будет ок???
спасибо, жду ответ!
Не работает потому, что у
p.textуказана ширина (width : 670px;). Ширина текста же больше, чем место справа от изображения, поэтому текст и переносится вниз.Хаки – это стили, который понимает только какой-то конкретный браузер. Вставляются туда же, куда и все остальные стили.
Да, если код будет правильным.
Спасибо за ответ!!
Я все подправил….
недавно уроки по СSS скачал, посмотрел, чуток нового подузнал….
и исправил свои ошибки…. )
теперь все пашет и в опере тоже… )))
ну, и ширину, конечно же убрал…
там с педдингами у меня возникли вопросы… но то такое…
просто если задать картинке и тексту педдинги, то текст вылазит за свой контейнер и приобретает минусовое значение. решил этот вопрос тем, что задал ширину блока текста 97% , а не 100!
думаю, что опять где-то напортачил… хотя хз..
.style {
_background: #F00;
}
/* код валидный */
Похоже, все-таки невалидный. Не существует свойства
_background.
А информацию по этому поводу в статье я для кого написал?
Прошу прощения, читал статью по диагонали и не заметил. Всё правильно написано.
Читать коменты не хотса, может уже писали, но для IE6 оч полезный хак:
это очень помогает, когда делаешь страничку с кучей инпутов, селектов и т.д. а как известно IE6 работает по своим законам, для расчета top,bottom,width,height, когда начинаеш использовать margin. Как можно реже используем margin…
Привет, друзья!
у меня снова есть небольшая проблемка! (((
надеюсь, вы как всегда мне поможете!
сейчас делаю себе сайтик, и все у меня хорошо, вот только в шестом эксплорере постоянно какие-то чудеса появляются!
я уже сиэсэс файл переделывал раз 200!
уже просто мозги едут!
поэтому решил спросить совета.
Итак, проблема вот в чем – у меня сайт с контентом и двумя боковыми меню, делаю я его на дивах.
проблема возникает в шестом эксплорере – третья колонка тупо не влазит на страницу посредством флоат лефт, и висит снизу, что убивает сайт!
это штука проявляется только в шестом эксплорере!
я уже думаю даже не заморачиваться над этим!
в мозиле, опере и сафари все работает на ура!
также в шестом эксплорере (при чем на одном компе, на другом все нормально) в блоках – при добавлении именно третьего блока меню появляется неполадка – основание блока отделяется пробелом, что нарушает внешний вид!
также есть проблема с прозрачностью пнг картинок, но над этия я уже даже не заморачиваюсь, так как понял, что вылечить это почти невозможно! где нет ссылок я полечил альфаканалами, где есть, не трогал, так как ссылка становится некликабельной!
если есть у кого-то время, уделите плиз внимание моему сайту – надеюсь, что проблема не в эксплорере, а в моих слабых способностях! ))
вот ссылка на сайт – http://www.booking.kiev.ua/new/probe.html
ну, файл си эс эс в коде уже найдете…
заранее спасибо, жду ответ по решению моей проблемы!
P.S. у меня в принципе есть вариант решения проблемы, но тогда код становится немного идиотским, по крайней мере в дримвьюере нарушается визуальная конструкция сайт, все блоки где попало, наезжают друг на друга и т.д. мне кажется, что так неправильно, хотя браузеры видят все нормально! даже в шестом эксплорере все хорошо кроме пнг картинок (но там была другая проблема, пока ее решал, переделал свой сайт немного, в дримвьюере стало все ок, а вот в экплорере шестом появилась кака)
если кому интересно – старый код с сиэсэс тут –
http://www.booking.kiev.ua/new/dj_dansir.html
Для Vano:
1.
Это бывает, если внутри блоков есть дочерний блок, который больше этих родительских. Откройте Firefox, установите Firebug и проверте width, padding і margin для блоков. Для совместимости с ИЕ 6 для блоков которіе под float используйте padding. (Подсказка: проверте ширину
#wrapper #middle #right .block_r .block_r_sr H3
)
2.
А эта проблемы бывает при очень маленькой всоте блока. Если высота мение 16px, стоит указывать для совместимости с ИЕ 6 параметр line-height. Он, обычно, на несколько px больше размера шрифта. Другие браузеры не берут во внимание этот параметр, а ИЕ6 жить без него не может. Значение параметра line-height достаточно указать на 1..2 px менше высоты блока. (Подсказка: если это блок
#wrapper #middle #right .block_r .block_r_niz
у него height:13px;
когда line-height: 18px;
)
Привет! )))
Хэллбой – спасибо большое! )))
разобрался – у меня в описании класса для тега ул были паддинги больше чем размер блока, поэтому не влазил третий блок. Исправил – уже все работает так как надо.
Проблема с пробеом внизу блока была, наверное, также с этим связана, так как исчезла после устранения чрезмерного пэддинга.
В целом все теперь работает хорошо…
вот ссылка – http://booking.kiev.ua/new/
Есть еще пару вопросом – может быть поможете и с этим?
Опера:
при открытии фотографий через ява скрипт флеш плеер налазит на фото и делает невозможным их переключение.
есть выход переместить фотографии, чтобы они не накладывались при открытии, но думаю, что возможно есть и другое решение.
Так же у меня вопрос – на старом буке (вероятно стоит много всякого хлама уже) маленькие картинки – конкретно 4 фото на странице перед флеш плеером у меня определяются как реклама и вместо них отображается надпись белого цвета [AD].
Что дает указание считать это рекламой??? Как сделать так, чтобы картинки нормально отображались?
У меня это из 4 компов показывает только на одном, причем читал статьи – пишут, что это фаервол оутпост делает, у меня он также установлен, может дело в нем? просто на другом компе тоже стоит оутпост (правда более свежая версия) и ничего не режется.
Есть ли правила для картинок, по которым они “рубятся”? может быть нужно сделать больше размер? (у меня 100х100 пкс)
Буду очень благодарен помощи!
заранее спасибо!
внесу свою лепту
для лисы
.class, noindex:-moz-any-link {color:#fff;
}
для оперы
noindex:-o-prefocus, .class {color:#fff;
}
для сафари и хрома и остальных вебкитовских браузеров
@media screen and (-webkit-min-device-pixel-ratio:0) {.class {
color:#fff;
}
}
enjoy ;)
Для Оперы и FF не подходят, их понимает IE7.
Иногда хорошо, что хаки есть.
А какой вы используете плагин, который сбоку слева находится?
да статья на сегодняшний день маленько устарела , единственная причина это плохо работают хаки для opera но это не беда есть новые, и вот не давно вышла opera 10.6 так вот она кардинально отличается от 9 ветки кому нужны хаки для всех даже самых последних версий opera вот есть оригинальная статья читать
Очень скептически после очередного проекта (http://legenda.megafonvolga.ru) отношусь к star-хакам (со *-чкой). Дело в том, что они понимаются и Операми, и IE 7 и считать их персональными смысла не имеет.
Когда найду пример, постараюсь это показать.
Кто-нибудь сталкивался?
Использую постоянно и еще ни разу не сталкивался с этим.
офигенный пост. постоянно к нему обращаюсь. пора бы уже для хрома обновить
Большое спасибо! Материал для оперы актуален на 20.08.2010. пробовал сам.
а как сделать что бы в таблице стилей вписать следующее:
паример .my1 {border:1px solid blak} только для IE????
<head><!--[if IE]>
<style type="text/css">
.my1 {
border:1px solid blak;
}
</style>
<![endif]-->
</head>
Извиняюсь но фигня, в большинстве случаев не работает, и к тому же это подключаем в самой странице, а я прошу сказать как в таблице стилей сделать.
Блин, Вы такой привередливый, как Internet Explorer #6 ))
Ничего кроме как другой таблицы стилей Вам никто не предложит.
<head>...
<!--[if IE]>
<link href="/templates/css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
...
</head>
А кто-то знает хак для оперы 9.25?
noindex:-o-prefocus, .class {color:#fff;
}
Для Оперы 10 работает! Шикарно! Думал, уже не найду. mdss, спасибо!!!
Статья, конечно, хорошая и полезная, спасибо. Но — есть одно “но” :)
Мне, как, начинающему (да и многим начинающим, наверняка) совсем не ясно — для чего эти хаки, какие баги они фиксят? Можно было бы добавить описания, или, хотя бы ссылки на другие источники с описаниями багов. А?
Поищите в Интернете статьи на тему “Что такое CSS-хаки” и все станет ясно.
Спасибо за статью! Я лично использую хаки только для ИЕ 7 и 6. Для нормальных браузеров использовать хаки вообще смысле не вижу, так как они за крайне редким исключением “послушные”. Да и такие браузеры, как правило, часто обновляются и пользователи не используют старые версии.