#html #css
#HTML #css
Вопрос:
КОД CSS:
.search {
float: left;
width: 100%;
display: block;
}
.search ul.tabs {
height: 23px;
margin: 50px 0 0 0;
padding: 0px;
}
/* FF ONLY */
.search ul.tabs, x:-moz-any-link {
height: 26px;
margin: 50px 0 0 0;
padding: 0px;
}
.search ul.tabs li {
float: left;
display: inline;
margin: 0;
padding: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-top-left-radius: 3px;
-moz-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}
.search ul.tabs li.second {
padding: 0 0 0 2px;
}
.search ul.tabs li a {
padding: 7px 10px 7px 10px;
background: #ffa63c;
font: normal normal bold 12px/1.5 "Arial", Helvetica, sans;
text-decoration: none;
color: #fdf9f1;
font-weight: bold;
}
.search ul.tabs li a:hover {
color: #fff;
}
HTML-КОД:
<div style="float:left">
<ul class="tabs">
<li id="ctl00_ctl00_cplMPBody_liRestaurnat" class="first">
<a title="Poišči po imenu" class="activeRestaurant" href="x">Poišči restavracijo</a>
</li>
<li id="ctl00_ctl00_cplMPBody_liAddress" class="second">
<a title="Poišči po imenu kraja" href="x">Poišči po krajih</a>
</li>
</ul>
</div>
И у меня проблема с IE:
FF
IE 7
что делать в IE 7?
Комментарии:
1. Что с
display: inline
иfloat: left
? Если это не хак, о котором я не знаю, поплавки применяются только к блокам.2. проблема в том, что меню меньше. Посмотрите желтое меню.
3. попробуйте добавить высоту строки вместе с height: 23px;
Ответ №1:
IE7 не поддерживает закругленные углы (они являются особенностью CSS3). Рассмотрите возможность использования css3pie, пользовательского интерфейса jquery или плагина jquery rounded corner:
Комментарии:
1. нет, это не проблема со скругленными углами. проблема в том, что меню меньше. Посмотрите желтое меню.
2. Вероятно, вам следовало указать, в чем была ваша проблема тогда. Поиграйте с заполнением
.search ul.tabs li a
. Возможно, вам придется сделать этоdisplay: block;
, а затем переместить их влево, чтобы заставить отступы и поля вести себя корректно в разных браузерах.
Ответ №2:
Это исправляет высоту табуляции для меня в IE7 (фактически IE8 в стандартном режиме IE7):
.search ul.tabs li a {
display: inline-block;
}
Это также работает в режиме quirks. По-видимому, фон встроенного элемента в старом IE не расширяется вместе с заполнением.