IE8 CSS文本間距問題

我在ie8中遇到了一個CSS文本對齊問題，需要創建一個ie8特定規則來解決問題，但一直未能弄清楚。IE8 CSS文本間距問題

頁面&文本應該看起來像這樣：Link to Page（使用像Chrome/Safari/Firefox的現代瀏覽器）。

附圖顯示ie8亂了間距。 enter image description here

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-29 Willard

不知道，如果我理解正確的話。你想用中心對齊的描述？我用內置的開發工具在IE8中檢查過它。如果您刪除了＃＃desc-wrapper {text-justify：distribute-all-lines; }'..在開發工具中刪除它後，它在IE8中看起來不錯... –

罪魁禍首是：

text-justify: distribute-all-lines;

在＃遞減的包裝器（其中，順便說一下，爲重複的ID，這應該是一個類）。或者從media.css和media-ie8.css中刪除它（不知道爲什麼它是必要的），或者在media-ie8.css中將其覆蓋爲auto。不過，嚴重的是，這是一個IE瀏覽器唯一的屬性。只要刪除它？

來源

2013-03-29 23:49:18 Ben

謝謝你們的回覆，我檢查了IE8開發者工具，如上所述，它在瀏覽器工具中工作，但不是當我更新CSS文件時，你是否看到其他任何可能導致此問題的東西？ – Willard

謝謝，得到它更新，不得不刪除兩行總數，使其工作： -ms-text-justify：distribute-all-lines; text-justify：distribute-all-lines; – Willard

好，你需要添加爲您的IE瀏覽器CSS條件註釋正在由常規media.css覆蓋

<!--[if IE 8]> 
your stuff 
<![endif]-->

來源

2013-03-29 23:42:52

我更新了「media-ie8.css」中的CSS，但仍然沒有骰子，這是一個奇怪的問題。感謝您的幫助！ – Willard

IE8 CSS文本間距問題

回答

相關問題