Автор Grumm задал вопрос в разделе Другие языки и технологии
Fieldset - не удается скруглить углы у рамки border-radius-ом. П а м а г и т е ! ! и получил лучший ответ
Ответ от Александр Ермилов[гуру]
в Opera - баг с border-radius для fieldset (так же как и для img, и для input type="img" и т. д. )
впору посоветовать выкинуть это говнобраузер и установить нормальный IE, в котором border-radius реализуется с помощью того же PIE, или других скриптов.)) )
Итак. Решаем трабл:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="ссылка" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
if($.browser.opera && parseFloat($.browser.version)<15){
$('fieldset').each(function(){$(this).replaceWith('<div class="fieldset">'+$(this).html()+'</div>');});
}
});
</script>
<style type="text/css">
fieldset, .fieldset {
border:1px solid #cccccc;
-o-border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
behavior: url(PIE.htc); /* pie - - всяческие CSS3 вкусности, в т. ч. border-radius для IE6-8 */
}
.fieldset, .pie_first-child { position:relative; padding:1em 10px 5px; margin:1em 0; }
.fieldset legend, .pie_first-child legend { margin:-1.5em 0 0 0; padding:0 2px 0.5em; background:#FFF; line-height:1em; }
</style>
</head>
<body>
<fieldset>
<legend>Fieldset</legend>
<label>Text: <input type="text" name="text" /></label>
</fieldset>
</body>
</html>
- сылка на последнюю версию jQuery подрезана парсером.
- parseFloat($.browser.version)<15 - шутка, но в Opera не исправляют баги годами, так что может стать реальностью. меняем в опере fieldset на div class="fieldset" скриптом.
отступы и остальное - настроить по вкусу. .fieldset legend, .pie_first-child legend - стили для оперы и IE.
Вазьми ножицы и кругляй.
для каждого браузера нужно указать свой идентификатор -moz-border-radius -webkit-border-radius: в Opera не робит и в осле как всегда все квадратно)
Лучше в качестве border-а использовать картинки... будет во всех браузерах одинаково смотреться в отличии от border-radius