Кроссбраузерное решение для закруглений и прозрачностей

1639
Всем привет, расскажу, как задолбался я с ишаком и что можно с этим сделать. Недавно делал проект, который использует закругленные уголки и прозрачные png-ки. И вот ударился Апстену, IE6-IE7 это такой гемор!!!!
Обо всем по порядку.

Закругления

[/b]
Сначала думал изменить сам принцип вывода модулей, т.е. подложить картинки с закруглениями,еще есть пару вариантов, но есть способ лучше:))) Все умные браузеры уже давно придумали способ как сделать закругления, но не ИЕ.
      
Код PHP:
   border-radius: 12px; /*(CHROM ИЕ9!!!!)*/
    -moz-border-radius: 12px; /*(Firefox)*/
 -webkit-border-radius: 12px; /*(CHROM)*/
      -o-border-radius: 12px; /*(Opera)*/
   И вот что придумали добрые люди для ИЕ начиная с 6 версии
в стилях как обычно для закругления прописываем 4 строчки которые я поставил сверху и вот эти две строчки
Код PHP:
 -khtml-border-radius: 12px;
   behavior: url("/border-radius.htc");
предварительно загрузив в корень или еще куда (тогда url надо точно прописать) вот этот файл border-radius.htc
теперь

прозрачность

[/b]
Прозрачные PNG-ки для и ИЕ это не что иное как картинка с черным баграундом, т.е. там где должен быть прозрачный участок там чернота. Делюсь решением, которое поможет использовать в дизайне эти самые png-ки.
Качаем библиотеку juery.pngFix.js кладем туда где лежат все квери библиотеки /includes/jquery/
подключаем ее между тегами <head> и </head>    в template.php
Код PHP:
<script type="text/javascript" src="/includes/jquery/jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
И ВСЕ!!! теперь даже ИЕ может закруглять углы и показывать правильно прозрачности.
Любой шрифт в любом браузере на вашем сайте
Комментарии (22)
Keep 13 июля 2011 в 11:00 +2
googlebot 13 июля 2011 в 14:29 +1
Интересная штука, надо попробовать, спасибо.
Alexneva 13 июля 2011 в 12:41 0
В Opera 9.64 и ниже не будет работать.
googlebot 13 июля 2011 в 14:26 0
Что-то у меня и закругления и прозрачность глючили безбожно, особенно там где много изображений или полупрозр. повторяющийся фон, отключил это все к чертям, т.к. загрузку страницы замедляло.
iParovoz 13 июля 2011 в 15:09 +1
да, вот пример сайта с закгруглениями http://www.trucktaxi.ru/
rim89 14 июля 2011 в 00:40 0
IE6-IE7 это такой гемор!!!!
не надо поддерживать эти дебильные версии
Alexneva 14 июля 2011 в 01:00 0
Ну 6 это да, а 7 еще более-менее...Тут мне недавно один чел с пеной у рта доказывал, что него якобы такая тематика сайта, что 80% посетителей именно с IE-6 приходят. )))
Keep 14 июля 2011 в 01:16 0
PIE скругляет 6,7 и 8 IE, я им скругляю только некоторые вещи, типа  рейтинга и кармы чтобы не в квадратах были, если округлять весь сайт то будет заметно медленнее работать в IE, и где добавляете PIE нужно обязательно добавлять position: relative; иначе может не корректно работать.
Imran 14 июля 2011 в 04:27 0
Очень интересно, я то думал для ie6 нет лекарства laugh
обновите ссылки,
не могу скачать файл и библиотеку.
а так очень нужная вещь, как ни как ie тоже браузер и им пользуются.
iParovoz 14 июля 2011 в 08:29 +1
перезалил
Imran 15 июля 2011 в 01:09 0
спасибо, скачал
теперь осталось сверстать один сайт по этому принципу
посмотрим как получиться.
0 14 июля 2011 в 13:51 0
Странно ! Сделал как описано, но не закругляет... Где именно в стилях нужно прописать строки для закругления ?

  border-radius: 12px; /*(CHROM ИЕ9!!!!)*/
-moz-border-radius: 12px; /*{Firefox}*/
-webkit-border-radius: 12px; /*{CHROM}*/
-o-border-radius: 12px; /*{Opera}*/
-khtml-border-radius: 12px;
behavior: url("/border-radius.htc");
iParovoz 14 июля 2011 в 14:02 +1
В стилях style.css у того дива где хотите закругления сделать.
Главное вот это файл border-radius.htc положите в корень. Если не выходит со style.css, то просто попробуйте для произвольного дива прописать стили и вставьте его в свой темплате после тега body например

<div style="
width:200px;height:200;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-khtml-border-radius: 12px;
behavior: url("/border-radius.htc"); ">
</div>
  
на денвере у меня не работало, работает только когда на хосте
iParovoz 14 июля 2011 в 14:24 +1
бордер забыл, чтоб видно было работает или нет
<div style="
width:200px;height:200px;
border:1px solid #ff0000;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-khtml-border-radius: 12px;
behavior: url("/border-radius.htc"); ">
</div>
Роман 6 сентября 2011 в 12:23 0
Может кому пригодится. Для того, чтобы корректно отображалось в ИЕ надо дописать:
Код PHP:
position:relative; zoom:1;
Александр I 25 октября 2011 в 15:25 -2
Чем дольше сайто-строители будут тратить кучу времени на поддержку IE ниже 8 версии, тем дольше юзеры-дебилы будут пользоваться этим говном.
Если сайт "не правильно" отображается в IE ниже 8 версии - это проблема юзера-лентяя, который не может/не хочет/ленится/не имеет возможности обновить версию своего говно-браузера. Пусть лучше он потратит 5 мин. СВОЕГО времени на обновление, чем армия web-строителей тратит СВОЁ время на извращения.

Призываю - НЕ ТРАТЬТЕ СВОЁ ДРАГОЦЕННОЕ ВРЕМЯ на юзеров-лентяев!
iParovoz 25 октября 2011 в 15:47 +3
это я так понимаю вызов теткам и дядькам? ))) Но теткам и дядькам которые сидят в во всяких администрация и гоструктурах, не всегда можно объяснить вообще что такое браузер и им пофигу что у них ИЕ6 стоит. Я понимаю если юзеру от 14 до 40, и он близок к интернету и компьютерам, то наверно соглашусь, надо просто говорить им чтоб поставили лису или хром. Но если человек какой нибудь номенклатурный работник и вызывает айтишников, если у него пропал значок громкости в панели задач или выпала мышка из гнезда, т.е. железобетонный, то думаю что еще долго все будут трахаться с ИЕ. Потому что как правило от таких как он зависят решения стоит ли этим программерам платить или нет, а проекты иногда стоят не 500р тогда стоит подумать делать кросбраузерность или не тратить свое драгоценное время)))))
Александр I 25 октября 2011 в 16:16 -2
это я так понимаю вызов теткам и дядькам? )))
О тех "тётках и дядьках", которые "сидят во всяких администрациях и госструктурах", пусть думает обслуживающий их сисадмин.
Если эти "тётки и дядьки" будут на каждом сайте видеть "заглушку" типа
"Ваш браузер устарел!
Вы пользуетесь говном!
СРОЧНО! Обратитесь к вашему системному администратору для устранения опасного программного обеспечения!!!
",
очень быстро сисадмины получать звездюлей и обновят ПО.
lezginka.ru 25 октября 2011 в 16:10 0
Defrost , к сожалению прав
Александр I 25 октября 2011 в 16:17 0
Да нифига он не прав! ИМХО конечно.
iParovoz 25 октября 2011 в 16:23 +2
это вы проекты на несколько тыс $ просто никогда не согласовывали))))) я просто по личному опыту с этим столкнулся, поучаствовал в тендере и понял, что кто платит, тот и музыку заказывает. Попробуйте пошлите вашего клиента который вас кормит, думается сразу вспомните что ИЕ6 еще не умер. Согласен ИЕ6 гавно-гавном, но мы блин заложники этой дряни, так что надо бороться
Александр I 25 октября 2011 в 16:41 0
Defrost, я как раз и предлагаю бороться.
Удачи вам в согласовании "проектов на несколько тыс $"!