0

ie8 で CSS テキストの両端揃えの問題が発生しており、この問題に対処するために ie8 固有のルールを作成する必要がありますが、解決できていません。

ページとテキストは次のようになります:ページへのリンク(Chrome / Safari / Firefox などの最新のブラウザを使用)。

添付された Img は、ie8 のめちゃくちゃな間隔を示しています。ここに画像の説明を入力

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>
4

2 に答える 2

1

犯人は次のとおりです。

text-justify: distribute-all-lines;

#desc-wrapper (ちなみに、これは繰り返される ID であり、これはクラスである必要があります)。media.css と media-ie8.css の両方から削除するか (なぜ必要なのか不明)、media-ie8.css で上書きして auto にします。ただし、これは IE 専用のプロパティです。外すだけ？

于 2013-03-29T23:49:18.247 に答える
0

ええと、ie-css が通常の media.css によって上書きされるため、条件付きコメントを追加する必要があります。

<!--[if IE 8]>
your stuff
<![endif]-->
于 2013-03-29T23:42:52.650 に答える