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

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

Закругления

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

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

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

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");
+1
iParovoz iParovoz 13 лет назад #
В стилях 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>

на денвере у меня не работало, работает только когда на хосте
+1
iParovoz iParovoz 13 лет назад #
бордер забыл, чтоб видно было работает или нет
<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>
0
Роман Роман 13 лет назад #
Может кому пригодится. Для того, чтобы корректно отображалось в ИЕ надо дописать:
Код PHP:
position:relative; zoom:1;
-2
Александр I Александр I 13 лет назад #
Чем дольше сайто-строители будут тратить кучу времени на поддержку IE ниже 8 версии, тем дольше юзеры-дебилы будут пользоваться этим говном.
Если сайт "не правильно" отображается в IE ниже 8 версии - это проблема юзера-лентяя, который не может/не хочет/ленится/не имеет возможности обновить версию своего говно-браузера. Пусть лучше он потратит 5 мин. СВОЕГО времени на обновление, чем армия web-строителей тратит СВОЁ время на извращения.

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

Еще от автора

Любой шрифт в любом браузере на вашем сайте
Хочу поделиться, как установить любой шрифт себе на сайт.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.