Совместимый с браузером скругленный угол с помощью CSS

Я работаю над браузером navbar с закругленными углами, используя DIV и закругленные изображения. Я отлично работал в FireFox, но обнаружил, что IE его обманывает (конечно).Совместимый с браузером скругленный угол с помощью CSS

Единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, чтобы мой контент DIV (navBody) растягивался в соответствии с высотой боковых изображений. В обоих браузерах теперь у меня есть это:

http://img80.imageshack.us/img80/5088/40128898.jpg

<div class="navWrapper"> 
<div class="navLeft"></div> 
<div class="navBody"> 
    <a href="/members">Login/Register</a> 
</div> 
<div class="navRight"></div> 
</div> 

.navRight 
{ 
float: left; 
width: 12px; 
height: 25px; 
background: url('/images/nav/tabright_off.png'); 
} 

.navLeft 
{ 
float: left; 
width: 12px; 
height: 25px; 
margin-left: 3px; 
background: url('/images/nav/tableft_off.png'); 
} 

.navBody 
{ 
float: left; 
background: #DDDDEE; 
white-space: nowrap; 
font: bold 12px Verdana, sans-serif; 
padding-top: 5px; 
overflow: hidden; 
} 

.navWrapper 
{ 
float: left; 
height: 25px; 
display: inline; 
}

Я попытался добавить 5px обивка-снизу navBody, но это работает только на FF и IE не из-за проблем блочной модели. Установка navBody на фиксированную высоту (вкладки должны быть высотой 20 пикселей), кажется, ничего не делает. Есть идеи?

источник

2010-08-07 MarathonStudios

Не могли бы вы предоставить полный код/демо? –

Я добавил соответствующий код CSS – MarathonStudios

Вам действительно нужны округленные границы в IE? Если нет, просто используйте правила * border-radius. Помните, что ваш сайт не должен выглядеть одинаково в каждом браузере. –

Попробуйте добавить

<br style="clear:both" />

В нижней части navBody DIV и посмотреть, если это помогает вещи.

источник

2010-08-07 17:57:42

Пробовал, он не имеет никакого значения ни в браузере. – MarathonStudios

Не знаете, почему добавление высоты 20px в CSS не работает (на navBody), это было бы моим первым предположением. Вместо этого вы можете попробовать сделать это height: 25px (чтобы соответствовать бокам), но затем измените line-height, чтобы нажимать текст вниз (вместо padding-top).

Другой вариант (который изменил бы фактический дизайн вашего навигатора) - установить width на все навигационные элементы. Рендеринг двигателей в целом предпочитает устанавливать width на любые плавающие элементы.

источник

2010-08-07 18:26:44

высота: 20 пикселей работает, но только в FireFox. Проблема остается в IE - это любой другой CSS, который я использую, вмешиваясь в свойство height: в IE? – MarathonStudios

Hackish, но вы можете попробовать '_height: 25px' в IE, чтобы узнать, разрешит ли это это ... –

Обнаружена проблема - FireFox добавлял верхнюю часть (5px) к высоте 20px, которую я установил, чтобы получить в общей сложности 25 пикселей; IE не был таким, чтобы высота оставалась на 20 пикселей. Исправлено это, сделав высоту 25px по умолчанию и компенсируя в Firefox, вырезая переполнение в div-обертки.

источник

2010-08-07 21:26:36 MarathonStudios

Вы также можете принять свой собственный ответ –

Совместимый с браузером скругленный угол с помощью CSS

ответ

Смежные вопросы