Нежелательные отступы на изображениях ссылок только в IE - PullRequest
Новая
       21

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

2 голосов
/ 27 ноября 2009

Я надеюсь, что кто-то может помочь. В моем контейнере 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 изображения отображаются только внутри строки, а 3-е изображение появляется под ней (с плавающей точкой справа).

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

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

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

Ответы [ 2 ]

2 голосов
/ 27 ноября 2009

Существует проблема с пробелами в 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>
1 голос
/ 27 ноября 2009

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

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

...