1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش تکنیک Cross Browser

شروع موضوع توسط hector2141 ‏10/9/12 در انجمن CSS

  1. کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,318
    تشکر شده:
    2,702
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    همانطور که می دانید کاربران در سرتاسر دنیا از Browser های مختلفی برای مشاهده ی صفحات اینترنتی استفاده می کنند و این Browser ها نیز برای نمایش المنت های HTML از مقادیر پیش فرضی که در الگوریتم های خود دارند استفاده می کنند و طبیعتا الگوریتم های رندرینگ آنها با هم یکسان نیست، همین نکته باعث می شود تا گاهی سایتی که ما طراحی می کنیم در مرورگرهای مختلف به یک شکل دیده نشود و بعضا در بعضی مرورگر ها طرح ما کاملا بهم ریخته شود.
    بعنوان مثال مقادیر margin, padding, border در مرورگرهای مختلف کاملا متفاوت است و اکثرا باعث بهم ریختگی طرح وب سایت در مرورگرهای مختلف می شود.

    برای رفع برخی از این مشکلات می توانید در ابتدای فایل CSS این مقادیر پیش فرض را در مرورگر Reset کنید، با اینکار وقتی فایل CSS شما در هر مرورگری اجرا می شود کلیه مقادیر پیش فرض مرورگر را بصورت واحد تنظیم می کند و بخش زیادی از مشکل Cross Browser Compatibility برطرف خواهد شد. برای Reset کردن این مقادیر این کدها را در ابتدای فایل CSS خود کپی کنید:

    کد HTML:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;

    body
    line-height: 1;

    ol, ul
    list-style: none;

    blockquote, q
    quotes: none;



    :focus
    outline: 0;



    ins
    text-decoration: none;

    del
    text-decoration: line-through;



    table
    border-collapse: collapse;
    border-spacing: 0;

    در صورتیکه می خواهید از این فایل در چندین CSS استفاده کنید، می توانید این دستورات را در یک فایل CSS ذخیره کنید و هر زمان که نیاز بود با استفاده از دستور import در ابتدای فایل CSS از آن استفاده کنید.
     
    یک شخص از این تشکر کرد.