jquery - IE 8 ignore or tag

Question

I have something like this

These column's content(the middle box of each columns) will be generated from the server so I don't know how many lines they have. This design will repeat in many pages and some of these pages have less column so I need to add a class for the width of these columns.

Some columns have different style like the second column from the right - it has red header and a little margin from bottom.

I need to count all the possibilities for any type of data and this is my code:

    <ul class="col styleCol5">
                        <li class="col5">
                            <h2 class="col5Header colHeader"><span>خلاصه محصول</span></h2>
                            <div class="col5Content colContent">
                                <span><span class="red">1.</span> نیازمند یک وکیل و کارگزار متخصص و امین جهت سرمایه‌گذاری وجوه خود و بهره‌مندی از عواید حاصل از این سر‌مایه‌گذاری می‌باشید.</span>
                                <br>
                                <span><span class="red">2.</span> به دنبال سپرده‌گذاری در حالت‌های مختلف و شرایط متنوع هستید.</span>
                            </div>
                            <div class="col5More colMore">
                                <span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
                            </div>
                        </li>

                        <li class="col5">
                            <h2 class="col5Header colHeader"><span>شرح کامل محصول</span></h2>
                            <div class="col5Content colContent">
                                <span class="red closedTitle">یک فرصت سرمایه گذاری بدون ریسک با بالاترین سود علی‌الحساب&lt;/span>
                                <span>سپرده‌سرمایه‌گذاری رویان مهر یکی از مجموعه سپرده‌های سرمایه‌گذاری مؤسسه مالی و اعتباری مهر است که ...</span>
                            </div>
                            <div class="col5More colMore">
                                <span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
                            </div>
                        </li>

                        <li class="col5">
                            <h2 class="col5Header colHeader"><span>نرخ سود</span></h2>
                            <div class="col5Content colContent nerkh">
                                <span>مشاهده جدول مقاطع زمانی دریافت سود در سپرده رویان مهر...</span>
                                <span class="table"><a href="javascript:void(0)">جدول نرخ سود</a></span>
                            </div>
                            <div class="col5More colMore">
                                <span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
                            </div>
                        </li>

                        <li class="col5">
                            <h2 class="col5Header colHeader"><span>محاسبات مالی</span></h2>
                            <div class="col5Content colContent mali">
                                <span>نرم افزار محاسبه سود سرمایه. نرم افزار محاسبه سود سرمایه.</span>
                                <span class="softwareMali"><a href="javascript:void(0)">مشاهده نرم افزار</a></span>
                            </div>
                            <div class="col5More colMore">
                                <span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
                            </div>
                        </li>

                        <li class="col5">
                            <h2 class="col5Header colHeader"><span>نکات مهم</span></h2>
                            <div class="col5Content colContent">
                                <span>سپرده سرمایه‌گذاری سما یکی از مجموعه سپرده‌های سرمایه‌گذاری مؤسسه مالی و اعتبار مؤسسه مالییهای سرمایه‌گذاری مؤسسه ما مهر است که سپرده‌گذار با افتتاح حساب سرمایه‌گذاری به مؤسسه وکالت عام می‌دهد تا سرمایه ...</span>
                            </div>
                            <div class="col5More colMore">
                                <span><a href="javascript:void">بیشتر</a></span><a href="javascript:void(0)"></a>
                            </div>
                        </li>



                    </ul

>

With JQUERY I add some padding or margins to necessary classes:

$("span.closedTitle").after("<br><br>");

    $(".colContent.nerkh > span, .colContent.mali > span").prepend("<br>");
    $(".colContent.nerkh span.table, .colContent.mali span.softwareMali").prepend("<br><br><br>");

I do it with BR tag because I need the space to seem like line spaces and I don't want to add fixed height so I use BR tag.

It works except IE 8, it ignores the BR tag.

What should I do ? Thanks.

Answer 1

也许将 span 设置为 inline-block 元素并将 br 设置为 padding-bottom:1.2em, 对于一行 if line-heightis 1.2em;是一个好主意