ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Если перед вами стоит задача в обязательном порядке создать эффект скругленных углов в IE 8 и более ранних версиях браузера, обратимся к одному из следующих сценариев:

• PIE автора Jason Johnston (http://css3pie.com/) считывает свойства border-radius, присутствующие в коде CSS, и делает так, чтобы они заработали в IE 6 и предыдущих версиях. Этот сценарий также реализует в IE некоторые другие эффекты CSS3;
• curved-corner автора Remiz Rahnas (http://code.google.com/p/curved-corner/) также считывает свойства border-radius из кода CSS, но работает только в том случае, если для всех четырех углов указаны одинаковые значения свойства border-radius;
• IE-CSS3 автора Nick Fetchak (http://fetchak.com/ie-css3/) предназначается в основном для добавления скругленных углов, но также создает в IE падающие тени;
• DD_roundies автора Drew Diller (http://dillerdesign.com/experiment/DD_roundies/) позволяет скруглять углы по отдельности, однако не считывает значения из кода CSS; вы должны вручную указать каждое из необходимых значений для IE.

Помимо этих ориентированных на IE решений, для скругления углов можно использовать массу других сценариев и методов, основанных на изображениях, которые были разработаны до того, как свойство border-radius вошло в обиход. В случае необходимости вы всегда можете прибегнуть к одному из этих испытанных временем способов. Множество вариантов перечислено на веб-сайтах http://www.smileycat. com/miaow/archives/000044.php и http://css-discuss.incutio.com/wiki/Rounded_Corners.

Из всех перечисленных способов скругления углов, на мой взгляд, самым простым и эффективным является первый способ из нашего списка — это способ PIE Jason Johnston. Его мы и рассмотрим на конкретном примере.

Зайдем на сайт http://css3pie.com/. На главной странице сайта нам продемонстрируют возможности PIE не только в скруглении углов, но также в создании бокс-тени и линейного градиента.

А теперь, давайте приступим к практической работе. В правом блоке сайта, находится вертикальное меню. Находим ссылку Download, переходим по ней на страницу для скачивания и скачиваем версию Download PIE 1.0.0.

Распакуем архив в корень сайта и сразу же переименуем папку PIE-1.0.0 в pie.

Откроем файл style.css и обратим внимание на правила, где мы задаем скругленные углы:

#page_header ul {
margin:5px 4px 5px 4px;
display: block;
height:30px;
border: solid 1px #D1D1D1;
-moz-border-radius:8px; /* Для Firefox */
-webkit-border-radius:8px; /* Для Safari и Chrome */
border-radius:8px;
}

#post{
width:695px;
margin:5px 2px 0 4px;
padding:4px;
float:left;
border: solid 1px #D1D1D1;
-moz-border-radius:10px; /* Для Firefox */
-webkit-border-radius:10px; /* Для Safari и Chrome */
border-radius:10px;
}

#sidebar{
width:190px;
float:right;
border: solid 1px #D1D1D1;
margin:5px 4px 0 2px;
padding:4px 2px;
-moz-border-radius:10px; /* Для Firefox */
-webkit-border-radius:10px; /* Для Safari и Chrome */
border-radius:10px;
}

#page_footer{
margin:4px 0 0 0;
border: solid 1px #D1D1D1;
-moz-border-radius:10px 10px 0 0; /* Для Firefox */
-webkit-border-radius:10px 10px 0 0; /* Для Safari и Chrome */
border-radius:10px 10px 0 0;
}

Для того, чтобы скругленные углы появились в браузерах IE8 и ниже добавим к нашим правилам следующий пункт:

behavior: url(path/to/pie_files/PIE.htc);

Правила примут следующий вид:

#page_header ul {
margin:5px 4px 5px 4px;
display: block;
height:30px;
border: solid 1px #D1D1D1;
-moz-border-radius:8px; /* Для Firefox */
-webkit-border-radius:8px; /* Для Safari и Chrome */
border-radius:8px;
behavior: url(../../pie/pie.htc);
}

#post{
width:695px;
margin:5px 2px 0 4px;
padding:4px;
float:left;
border: solid 1px #D1D1D1;
-moz-border-radius:10px; /* Для Firefox */
-webkit-border-radius:10px; /* Для Safari и Chrome */
border-radius:10px;
behavior: url(../../pie/pie.htc);
}

#sidebar{
width:190px;
float:right;
border: solid 1px #D1D1D1;
margin:5px 4px 0 2px;
padding:4px 2px;
-moz-border-radius:10px; /* Для Firefox */
-webkit-border-radius:10px; /* Для Safari и Chrome */
border-radius:10px;
behavior: url(../../pie/pie.htc);
}

#page_footer{
margin:4px 0 0 0;
border: solid 1px #D1D1D1;
-moz-border-radius:10px 10px 0 0; /* Для Firefox */
-webkit-border-radius:10px 10px 0 0; /* Для Safari и Chrome */
border-radius:10px 10px 0 0;
behavior: url(../../pie/pie.htc);
}

Протестируем нашу страничку. Для устранения несоответствия расположения блоков, откроем файлы ie_8.css и ie_7.css и произведем необходимые изменения.

Файл ie_8.css

#page_header ul{
z-index:7;
position: relative
}
#post{
position: relative ;
z-index:5;
height:428px;
background:#FFFFFF
}
#sidebar{
background:#FFFFFF;
position: relative;
z-index:8;
}
#sidebar nav ul{
margin:5px 0 0 2px;
background:#FFFFFF;
position: relative;
}
#page_footer{
position: relative;
z-index:9;
}

После внесения изменений страница будет выглядеть так:

Файл ie_7.css

#container{
width:900px;
}
#post{ margin-top:15px}
#sidebar{
margin-top:15px;
width:174px;
float: left;
}
#sidebar nav ul{
margin:5px 0 0 42px;
}
#page_footer{ height:40px}
#page_footer p{margin:10px 0 0 10px}

Протестируем страницу в браузере IE7. Внешний вид страницы будет такой же как на верхнем рисунке.

Таким образом проблема создания скругленных углов в браузерах не поддерживающих CSS3 решена.