CSS Текст позиция IE/FF вопрос

Question

У меня есть эта навигация

<div class="cookieBar"> 
    <div class="light first"> 
     <a href="#" class="ckLnk">Home</a> 
    </div> 
    <div class="dark"> 
     <img src="images/cnavR1.png" class="pointE" /><a href="#9" class="ckLnk">Cars</a> 
    </div> 
    <div class="light"> 
     <img src="images/cnavR2.png" class="pointE" /><a href="#11" class="ckLnk">Ferrari</a> 
    </div> 
    <div class="dark"> 
     <img src="images/cnavR1.png" class="pointE" /><a href="#18" class="ckLnk">Broken Ones</a> 
    </div> 
    <div class="light"> 
     <img src="images/cnavR2.png" class="pointE" /><a href="#23" class="ckLnk">No Windows</a> 
    </div> 
    <img src="images/cnavR1.png" class="pointE" /> 
    <div style="clear:both"> 
    </div> 
</div> 

С помощью CSS:

/* Cookie navigation trail */ 
.cookieBar 
{ 
    background-color: #D8DFE3; 
    height: 26px; 
    width: 100%; 
    margin-bottom: 12px; 
} 
.light 
{ 
    background-color:#0F6B93; 
    height: 26px; 
    float:left; 
} 
.dark 
{ 
    background-color:#0E3B52; 
    height: 26px; 
    float:left; 
} 
.first 
{ 
    padding-left: 10px; 
} 
.ckLnk 
{ 
    color: #ffffff; 
    font-size: 11px; 
    font-weight: bold; 
    font-family: Arial; 
    text-decoration: none; 
} 
.ckLnk:hover 
{ 
    text-decoration: underline; 
} 
.pointE 
{ 
    float:left; 
    padding-right:10px; 
} 

Мне нужна ссылка якоря, чтобы расположить несколько пикселей ниже, так что это сосредоточено в коробке. Когда я делаю position:relative;top:5px; он отлично работает в FF, но в IE это довольно много пикселей. Кажется, я не могу найти его в обоих браузерах!

Любые советы? IE должен быть сверху: 8px; и FF должен быть сверху: 4px; для того, чтобы выглядеть правильно.

Answer 1

С другой стороны, чтобы выровнять ссылку в центре вы можете просто использовать line-height того же размера, что и высота navbar. В этом случае:

.ckLnk 
{ 
    line-height: 26px; 
} 

Answer 2

IE может слушать # тег, как, например:

#top:5px; only works in IE, 

Так попробуйте высоту DIV уменьшается с 5px

#height:21px; 

Не забудьте сохранить старую высоту для других браузеров :

#height:21px; 
height:26px; 

Ждать, что я забыл!

Если вы уменьшаете с 5px dont work @ height, попробуйте увеличить его с помощью 5px!

#height:31px; 

Answer 3

Будет ли использование условных комментариев решить проблему?

http://en.wikipedia.org/wiki/Conditional_Comments

Answer 4

Прежде всего, вы должны попытаться сбросить, как многие свойства, как вы можете. Иногда разница между по умолчанию margin/padding/whatever в разных браузерах.

Попробуйте загрузить reset.css и убедитесь, что эта проблема по-прежнему вызывает такую ​​же проблему. Таким образом, вы можете начать сужаться там, где проблема.

Answer 5

Лично я бы изменил эту разметку HTML на неупорядоченный список и стиль LI, используя изображения.

будет более семантически правильным и более простым в управлении.

Разметка что-то вроде:

<ul class="cookiebar"> 
<li class="first light"><a class="home" href="#">Home</a></li> 
<!-- etc--> 
</ul> 

CSS для

a.home { 
    background:url(cNavR1.png); 
    display:block; 
    width:100%; 
    height:100%; 
    text-indent:-999em; 
} 

и т.д.