IE8 CSS文本间距问题文本对齐

我在ie8中遇到了CSS文本对齐问题，需要创建一个ie8特定规则来解决问题，但我对该过程不太熟悉。IE8 CSS文本间距问题文本对齐

页面&文本应该看起来像这样：Link to Page（使用Chrome/Safari/Firefox等现代浏览器）。

附图显示ie8间距。 ie8 text spacing issue

我该如何解决这个问题？一如既往，您的帮助非常感谢！

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>

来源

2013-03-27 Willard

每次添加新的css样式表时，您都不必添加新的'DOCTYPE'和''部分... IE会肯定跳转。 – JFK 2013-03-27 06:24:16

修复您的HTML，它包含[38错误]（http://validator.w3.org/check?uri=http%3A%2F%2Fbondofperfection.com%2Fmedia.php&charset=%28detect+automatically%29&doctype=Inline&group=0&user -agent = W3C_Validator％2F1.3 + http％3A％2F％2Fvalidator.w3.org％2Fservices） – 2013-03-27 07:07:32

感谢您的建议。我真的可以使用这个奇怪的ie8问题一些帮助，任何帮助表示赞赏。 – Willard 2013-03-28 03:54:51

尝试增加text-justify: inter-word到.DESCRIPTION风格。

来源

2014-02-04 23:21:38 NetMage

IE8 CSS文本间距问题文本对齐

回答

相关问题