Почему IE7 отрезает нижнюю часть элементов списка с помощью этого CSS?

Question

Эй, у меня действительно раздражающая ошибка IE7, которую я пытаюсь устранить. Нижние элементы списка обрезаются:

IE7
Изображение в IE7 http://img291.imageshack.us/img291/9363/picture16u.png

Firefox
Изображение в Firefox http://img704.imageshack.us/img704/246/picture17lk.png

Вот CSS:

/* begin buttons */

ul.buttons { /* general settings */                       
margin-left: 0;                                              
margin-bottom: 0em;                                              
margin-right: 0;                                              
margin-top: .0em;                                              
float: left;                                              
height: 23px;                                             
text-shadow: 0px 0px;                       
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */
}

ul.buttons li { /* do not change */
display: inline;
height: 35px;  
}

ul.buttons li img {
margin-right: 7px;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.buttons li a { /* settings for all tab links */                                 
border-bottom-color: #4c9a01;                                                                  
border-bottom-width: 1px;                                                                  
border-bottom-style: solid;                                                                  
letter-spacing: .1em;                                                                  
color: white;                                                                  
padding-left: 8px;                                 
padding-bottom: 4px;                                 
padding-right: 8px;                                 
padding-top: 5px;                                 
font-size: .75em; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #94c909; /* set unselected tab background color as desired */ /* set unselected tab link color as desired */
margin-right: 8px; /* set additional spacing between tabs as desired */
text-decoration: none;
}

и HTML:

<ul class="buttons">
  <li class="tab1"><a href="index.html">Dashboard</a></li>
  <li class="tab2"><a href="index2.html">My Leases</a></li>
  <li class="tab3"><a href="index3.html">Guide</a></li>
</ul>

Я гуглил это, но не могу найти решение, есть идеи?

Answer 1

Похоже, что элементы li обрезаются по высоте элемента ul (23 пикселя):

ul.buttons { /* general settings */                        
margin-left: 0;                                               
margin-bottom: 0em;                                               
margin-right: 0;                                               
margin-top: .0em;                                               
float: left;                                               
height: 23px;  /* <--- here */                                             
text-shadow: 0px 0px;                        
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */ 
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */ 
}

Скорее всего, значение по умолчанию overflow отличается в IE и Firefox. Можете ли вы увеличить ul высоту до 35px высоты ваших li элементов? <Ч /> rohancragg прокомментировал хорошее предложение использовать файл сброса CSS для нормализации настроек браузера по умолчанию - http://meyerweb.com/eric/tools/css/reset/.

<Ч />

Я только что заметил display: inline; на ваших li элементах. height игнорируется для inline элементов, и вы должны использовать inline-block вместо.

Answer 2

Сначала установите Инструменты разработки IE . Это похоже на Fire Bug и позволит вам менять CSS на лету.

Во-вторых, измените CSS на живом сайте, чтобы найти проблему.

В-третьих, измените CSS и протестируйте в Firefox. Если в Firefox он по-прежнему выглядит нормально, создайте оператор IF IE в своем CSS следующим образом:

<!--[if IE 7]>
Special instructions for IE here
<![endif]-->

Answer 3

Первое предположение - один браузер игнорирует высоту ul и использует высоту li. почему вам нужно указать на ul.button s меньшую высоту, чем ul.buttons li?