Проблема с IE 7 CSS

#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:

введите описание изображения здесь

IE 7

введите описание изображения здесь

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

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

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

3. попробуйте добавить высоту строки вместе с height: 23px;

Ответ №1:

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

http://css3pie.com/

http://jqueryui.com/

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

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

2. Вероятно, вам следовало указать, в чем была ваша проблема тогда. Поиграйте с заполнением .search ul.tabs li a . Возможно, вам придется сделать это display: block; , а затем переместить их влево, чтобы заставить отступы и поля вести себя корректно в разных браузерах.

Ответ №2:

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

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

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