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

[hossein98 141]

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

http://parsipuls.com

[imanfakhar 26231]

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

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

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

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

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; }
}
}

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