Простой ответ - чтобы быть полностью кросс-браузерно совместимым (и под этим я подразумеваю «работу в Internet Explorer»), вы не можете сделать это с указанными ограничениями разметки (ну, вы можете, если вы используетеjavascript для изменения DOM на лету).
Если вы пока игнорируете IE (что я считаю лучшей политикой - вы можете добавить поддержку для него позже с помощью JS), вы можете использовать CSS3 border-radius свойство , которое имеет специфичные для поставщика реализации в Webkit (Safari и Chrome), Mozilla (Firefox и его многочисленные ответвления) и теперь (наконец) в Opera .Таким образом, ваша разметка и CSS будут выглядеть примерно так:
Markup
<div class="round">
<h2>Box Heading</h2>
<p>Box content etc.</p>
</div>
CSS
.round {
border-radius: 8px; /* or whatever radius you want */
-moz-border-radius: 8px; /* vendor specific for mozilla */
-webkit-border-radius: 8px; /* vendor specific for webkit browsers */
}
.round h2 {
background: orange url(heading_back.png) repeat-y 0 0; /* etc */
}
Что-то в этом роде должно работать в последних версиях уже упомянутых браузеров.Который оставляет IE.Лично я бы оставил все как есть и оставил бы пользователям IE свой собственный особый квадратный взгляд на мир.Но если это необходимо для поддержки, я бы использовал jQuery для вставки некоторых дополнительных элементов, которые вы затем можете стилизовать.Вдобавок к моей голове, что-то вроде этого должно работать:
js with jQuery library
$('.round').prepend('<div class="tl"></div><div class="tr"></div>');
$('.round').append('<div class="bl"></div><div class="br"></div>');
Затем у вас будет верхний левый / правый и нижний левый / правый делители, к которым вы можете применить прозрачные изображения углов PNG в вашей таблице стилей, чтобыдать макет закругленный угол эффекта в IE.Он не идеален, но в то же время не является IE.
css for IE
.round { position: relative; }
.tl, .tr, .bl, .br { height: 7px; width: 7px; position: relative;}
.tl { float: left; background: transparent url(ie_tl.png) no-repeat top left; }
.tr { float: right; background: transparent url(ie_tr.png) no-repeat top right; }
.bl { float: left; background: transparent url(ie_bl.png) no-repeat top left; }
.br { float: right; background: transparent url(ie_br.png) no-repeat top right; }
Затем можно использовать позиционирование CSS, чтобы получить эти фоновые изображения в правильном положении для формирования «углов» вашего закругленного прямоугольника.