Нежелательная прокладка на изображения ссылок только в IE

Question

Я надеюсь, что кто-то может помочь. В моем контейнере DIV у меня есть 3 изображения, которые мне нужно сидеть бок о бок в одной строке. Это действительно так в любом другом браузере, за исключением, как обычно, досадно, в IE6, IE7 и IE8 (стон).

Каждый из изображений заворачивают в тег следующим образом: -

<div id="images"> 

<a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a> 

<a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a> 

<a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a> 

</div><!--end of images--> 

Мой CSS как не следует: -

/* Global reset */ 
    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, font, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
    } 
    a img, :link img, :visited img { 
    border: 0; 
    display:block; 
    } 

    img{ 
    display:block; 
    } 
    /* End Global reset */ 

#images{ 
width:295px; 
clear:both; 
border:none; 
margin-top:30px; 
} 

#images a:link{ 
text-decoration:none; 
border:none; 

} 
#images a:visited{ 
text-decoration:none; 
border:none;  
} 
#images a:hover{ 
text-decoration:none; 
border:none; 

} 

img.img01,img.img02 { 
width:98px; 
float:left; 

} 

img.img03{ 
width:99px; 
float:right; 

} 

Независимо от того, что я делаю Кажется, я не могу исправить отображение в IE. IE добавляет дополнительное дополнение влево и вправо каждого изображения, и результат состоит в том, что в нем отображаются только 2 изображения, а третье изображение появляется под ним (плавающее справа).

Я попытался удалить все пробелы (предложение, которое я встретил в другом месте), но это не помогло. Я также играл с отрицательной маржой, но я бы предпочел не идти по этому маршруту, не понимая, что происходит на самом деле.

Может ли кто-нибудь пролить свет на то, что на самом деле происходит здесь и как я могу решить? - Это меня раздражает!

Большое спасибо заранее.

Answer 1

Вы должны посмотреть, как IE вычисляет ширину. 3 изображения имеют общую ширину 295, а ваш div имеет общую ширину 295. Эта ширина ширины div 295 измеряется снаружи div и, к сожалению, область содержимого div меньше 295. По мере увеличения эксперимента ширину div и проверьте правильность отображения изображений.

This это одна страница, которая описывает его. Просто найдите IE Box Model в google.

Answer 2

В IE есть проблема с пробелами ... попробуйте удалить промежуток между вашими тегами и поместить их в одну строку.

<div id="images"><a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a><a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a><a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a></div>