2011-05-17 5 views
0

CSS:IE 7 CSS проблема CODE

.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

enter image description here

IE 7

enter image description here

что делать в IE 7?

+1

Что такое 'display: inline' и' float: left'? Если это не хак, который я не знаю, поплавки применяются только к ящикам. –

+0

проблема в том, что меню меньше. Посмотрите желтое меню. – senzacionale

+1

попытайтесь добавить высоту линии с высотой: 23px; – ace

ответ

1

IE7 не поддерживает закругленные углы (они являются особенностью CSS3). Рассмотрите возможность использования css3pie, Jquery UI, или Jquery закругленного угла плагина:

http://css3pie.com/

http://jqueryui.com/

http://jquery.malsup.com/corner/

+0

Нет проблем с закругленными углами. проблема в том, что меню меньше. Посмотрите желтое меню. – senzacionale

+2

Вероятно, вы должны были указать, какова была ваша проблема. Играйте с заполнением '.search ul.tabs li a'. Возможно, вам придется сделать это «display: block;», а затем поплавить их влево, чтобы заставить paddings & margins хорошо вести кросс-браузер. – dtbarne

1

Это фиксирует высоту вкладки для меня в IE7 (на самом деле IE8 в режиме IE7 стандартов):

.search ul.tabs li a { 
    display: inline-block; 
} 

Он также работает в режиме quirks. По-видимому, фон на встроенном элементе старого IE не расширяется с дополнением.

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