IE8 CSS Text Spacing Issue Text-Justify

Question

Я столкнулся с CSS-текстом, оправдывающим проблему в ie8, и вам нужно создать определенное правило ie8 для решения проблемы, но я не слишком хорошо разбираюсь в этом процессе.

страница & текст должен выглядеть так: Link to Page (Используйте современный браузер, как Chrome/Safari/Firefox).

Img прилагается, показывая точный интервал.

Как это исправить? Ваша помощь очень ценится, как всегда!

CSS

/*Fancybox Gallery Divs*/ 


#thumbs { 
    width: 960px; 
    margin-top:20px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

#thumbs a { 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 

.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 

/*Descriptions*/ 


#desc-wrapper { 
    width: 960px; 
    padding-top: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

.description { 
    float:left; 
    width: 320px; // Increase/decrease width for margin between images 
    height: 25px; 
    text-align: center; 
    margin-bottom: 30px; 
} 

.clear { 
    clear:both; 
} 

HTML

<!--/ Photo Thumbs Row 1--> 

<div id="thumbs"> 

<a id="single_image" href="/bp/images/roscoes-run.jpg"><img src="/bp/images/roscoes-run(thumb).jpg" alt=""/></a> 
<a id="single_image" href="/bp/images/roscoes-run-2.jpg"><img src="/bp/images/roscoes-run-2(thumb).jpg" alt=""/></a> 
<a id="single_image" href="/bp/images/chicken-waffles.jpg"><img src="/bp/images/chicken-waffles(thumb).jpg" alt=""/></a> 

<span class="stretch"></span> 


</div> 

<!--/ Description--> 

<div id="desc-wrapper"> 
<div class="description">Roscoe's Run 2012</div> 
<div class="description">Roscoe's Run 2012</div> 
<div class="description">Roscoe's Run 2012</div> 
<div class="clear"></div> 
</div> 




<!--/ Photo Thumbs Row 2--> 

<div id="thumbs"> 

<a id="single_image" href="/bp/images/mens-retreat-2012.jpg"><img src="/bp/images/mens-retreat-2012(thumb).jpg" alt=""/></a> 
<a id="single_image" href="/bp/images/winter-retreat-2012.jpg"><img src="/bp/images/winter-retreat-2012(thumb).jpg" alt=""/></a> 
<a id="single_image" href="/bp/images/new-years-eve-2012.jpg"><img src="/bp/images/new-years-eve-2012(thumb).jpg" alt=""/></a> 


<span class="stretch"></span> 

</div> 


<!--/ Description--> 

<div id="desc-wrapper"> 
<div class="description">Men's Retreat 2012</div> 
<div class="description">Winter Retreat 2012</div> 
<div class="description">New Year's Eve 2012</div> 
<div class="clear"></div> 
</div> 

Answer 1

Попробуйте добавить text-justify: inter-word в стиле .description.