با تمام مرورگر ها دوست باشید
یکی از مشکلات عمده طراحی عدم سازگاری طرح و یا وب سایت شما با مرورگر های مختلف می باشد، طبیعی است در صورتی که بیشتر از 100 نوع مرورگر باشه رکسیدن با ساز هر یک از این شرکت ها کار ساده ای نیست، ولی خوشبختانه تعداد تعداد کمی از مرورگر ها توانسته عمومیت پیدا کنند، از جمله فایرفاکس، کروم، اپرا، اینترنت اکسپلورر و ... .
امروز یک دفعه متوجه شدم که فرم اشتراک در پایگاه که در صفحه اصلی وب سایت pishbinikon.com قرار گرفته است فقط در کروم به درستی نمایش داده می شود و در دیگر مرورگر ها TextBox حدود 2 پیکسل بالا تر قرار گرفته است.
تکه کدهایی برای این وب سایت نوشتم تا در تمام مرورگر ها فرم به صورت استاندارد نمایش داده شود، کد هایی که در سایت قرار داده ام را در این پست نیز برای شما عزیزان قرار می دهم:
/*firefox*/
@-moz-document url-prefix()
{
form input[type=text]
{
margin-top:2px;
}
}
/*opera*/
@media (min-resolution: .001dpcm) {
_:-o-prefocus, form input[type=text]
{
margin-top:2px;
}
}
* html form input[type=text]
{
/*ie6*/
margin-top:2px;
}
*+html form input[type=text]
{
/*ie7*/
margin-top:2px;
}
@media screen
{
form input[type=text]
{
/*ie8*/
margin-top:2px;
}
}
:root form input[type=text]
{
/*ie9*/
*margin-top:2px \9;
}
form input[type=text]
{
/*ie7 and less*/
*margin-top:2px;
}
کد های بالا همراه با توضیحات هستند، تنها تکه کد form اشاره می کنم، به کد زیر توجه نمایید:
form input[type=text]
این تکه کد میره ورودی از نوع Text را از درون فرم انتخاب می کنه و در مرورگرهای مختلف به اندازه 2 پیکسل پایین می کشد.
امیدوارم مفید واقع شده باشد.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.