استیل دهی تگ hr بصورت Cross Browser

معمولا بکار بردن تگ hr در طراحی صفحات وب دردسرهای مختص به خود را داراست از جمله مهمترین آنها نشان دادن شکل و شمایل آن بصورت یکسان است در انواع مرورگرهای وب (Cross Browser) با اِعمال انواع و اقسام عمگرها CSS.

روش زیر یکی از راه های سریع و ساده ایست که می توان برای استیل دهی به یک تگ hr بکار برد. ابتدا تگ hr را در داخل یک تگ div نوشته و یک کلاس مثلا بنام hrDiv به آن نسبت دهید:

<div class=”hrDiv”>
	<hr />
</div>

سپس در CSS کلاس hrDiv خاصیت clear آن را به both ست کنید. این نکته بخاصر آن است که اطمینان حاصل کنیم که div به هیچ عنصر دیگری در طرفین چپ و راست اجازه شناور شدن (float) نمی دهد.

سپس از یک تصویر یک پیکسلی (یک نقطه1) بعنوان زمینه برای اِعمال افکت یک خط ممتد در راستای افق برای div استفاده کرده و برای پنهان کردن hr خصوصیت display آن را به hidden ست می کنیم. توجه داشته باشید که با وجود پنهان کردن تگ hr هنوز آن تگ در کد html پابرجاست.

.hrDiv
{
    clear:both;
    height: 1px;
    background: url(images/dot.gif) top left repeat-x;
    margin: 1em 0;
    width:100%;
}
.hrDiv hr
{
    display: none;
}