hossein98

درخواست راهنمایی برای ست کردن قالب با تمام مرورگرها

2 پست در این موضوع قرار دارد

سلام دوستان من قالبی برای سایتم آماده کردم و روی مرورگر گوگل کروم بدون هیچ مشکلیست اما توی مرورگرها دیگه مشکل داره ممنون میشم آموزشی مبنی بر ست کردن قالب با مرورگرهای دیگه بدید

http://parsipuls.com

به اشتراک گذاری این پست


لینک به پست

آموزش به این شکل تقریبا غیر ممکنه (حداقل در شرایط فعلی)

هر مرورگری از یک سری استایل در حالت دیفالت استفاده می کنه

یعنی اگر به یک صفحه حاوی عکس و نوشته هیچ استایلی ندید در هر مرور گری به یک شکل می بینیدش و این استایلیه که در خود مرورگره در اولین قدم با ریست کردن قالب باعث می شید که استایل های مختلف مرورگرها بی تاثیر بشه و بعد باید استایل بدید

این یک نمونه از کد ریست استایله


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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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;
}

مرحله بعد کدهای سری سومه که موزیلا و اپرا بسیاری از این کدها را به صورت شخصی می خونند مثلا این کد سایه به باکسه


box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);

که اگر بخواهیم برای همه مرورگرها اجرا شه باید تبدیل بشه به


-moz-box-shadow:10px 10px 5px rgba(0, 0, 0, 0.2);
-o-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);

و البته این کد باز هم در IE 8 به پایین اجرا نمی شه و باید برای اونها با عکس سایه رو ساخت و استایل جدید داد

بعضی از کدها در IE به وسیله فیلتر های ماکروسافت و جاوا اسکریپت اجرا می شند مثل کد


-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(7.5deg); /* IE9 */
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6,IE7 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')";

که برای چرخیدن باکس به نسبت خط افقه

و یا کد


opacity: 0.75;
-moz-opacity: 0.75;
-webkit-opacity: 0.75;
-khtml-opacity: 0.75;
-ms-filter: "Alpha(opacity=75)";
filter: Alpha(opacity=75);

که برای میسزان وضوح و شفافیت باکسه

خوشبختانه از IE9 تقریبا همه مرورگرها وب کیت ها را می شناسند ولی هنوز برای آی ای های پایین تر و تمام برئوسرهایی که ازشون تبعیت می کنند باید کد جدا نوشت

کد استایل جدا رو به این صورت به مرورگرها معرفی می کنند

استایل برای IE


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

استایل برای غیر از IE


<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

استایل برای یک ورژن خاص IE مثلا 7


<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

استایل برای یک ورژؤن خاص IE و از اون پایین تر


<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

و استایل اختصاصی برای موزیلا


@-moz-document {
{
body { color: purple; background: yellow; }
}
}

بیش از این چند جمله هر چی هست تجربی است و باید تجربه بشه

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری