رفتن به مطلب

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


::AmiR::

پست های پیشنهاد شده

درود فراوان

همونطور که همه میدونیم با فراوانی مرورگرها خیلی سخت شده که بخشی رو اضافه کرد که با همه ی مرورگرها سازگار باشه.حالا هرچی میخوایم به کاربرها بگیم که اقاجون ، جون مادرت از موزیلا استفاده کن ، اما بازم کاربرها با مرورگرهای متفاوت میان به سایت.

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

اگه بزرگواری بفرمائید که راهنمایی کنید که چطور میشه کد زیر رو با همه ی مرورگرها ست کنم ممنون میشم.


div.peek-a-boo_right {
position: fixed;
z-index: 100;
bottom: -145px;
right: -122px;
-webkit-transform:scale(0.75) rotate(-39deg);
-moz-transform:scale(0.75) rotate(-39deg);
-o-transform:scale(0.75) rotate(-39deg);
/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0.43); */
-ms-transform:scale(0.75) rotate(-39deg);
-webkit-transform: scale(0.75) rotate(-39deg);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
div.peek-a-boo_right:hover {
bottom: 20px;
right: 10px;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0); */
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

لینک به ارسال

شما بیگد این عدم هماهنگی در چی هست و اگر آنلاین هست آدرس بدید تا راحتتر بشه در مورد فیکس کمک کرد

لینک به ارسال

کدهای scale و transition هیچکدوم در IE زیر 9 ساپورت نمی شند ولی با وجود webkit هر دو در کروم باید درست اجرا بشند

لینک به ارسال

درود.شرمنده اصلا فراموش کردم آدرس بدم.بخشی رو ایجاد کردم به عنوان تبلیغات گوشه سمت راست که میتونید در این بخش ببینید

با موزیلا بسیار خوب نشون داده میشه و کاملا فیکس شده اما با کروم در جای خودش میمونه و به همراه مرورگر پایین نمیاد و با IE هم که واااویییلااان.رفته چسبیده به زیر فوتر :wacko:

ویرایش شده توسط amir1909
لینک به ارسال

پوزیشن رو absolute کنید و بعد مقدار راست و پایین رو برابر صفر قرار بدید

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

لینک به ارسال
  • 3 ماه بعد...

این بخش امتیاز تو کامنت ها تو مرورگر کروم و اکسپلورر درست نمایش داده نمیشه ولی تو فایرفاکس درست نمایش داده میشه.

تو این لینک میتونید ببینید : zoobino

وقتی استایل رو تغییر میدم تو فایرفاکس هم بهم میرزه

لینک به ارسال

الان این چیزی هست که تو فایرفاکس نشون میده و درستش این هست:

v5849_a2.png

و این چیزی هست که تو کروم و اکسپلورر نشون میده:

z4415_a1.png

لینک به ارسال

خوب اینگونه تعریف شده این ایراد نیست طراح اینگونه طرح رو تعریف کرده و. قطعا بجز css دستوراتی دئر فایل های دیگه هم براشون داره بهتر دستکاریش نکنید

لینک به ارسال

ایمان جان این بخش کامنت ها رو من خودم درست کردم. الان کاربرهایی که از کروم یا اکسپلورر استفاده میکنن نمیتونن امتیاز بدن و اینکه این بخش حالت بهم ریختگی و گسسته داره به نظرم خوب نیست.

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

لینک به ارسال

اگر استایل رو استاندارد زده باشید نباید حداقل توی دو مرورگر کروم و فایرفاکس مشکلی داشته باشه. اما می تونید برای کروم استایل اختصاصی تعریف کنید. برای این کار این اسکریپت کمکتون می کنه:

http://rafael.adm.br/css_browser_selector/

لینک به ارسال

اگر استایل رو استاندارد زده باشید نباید حداقل توی دو مرورگر کروم و فایرفاکس مشکلی داشته باشه. اما می تونید برای کروم استایل اختصاصی تعریف کنید. برای این کار این اسکریپت کمکتون می کنه:

http://rafael.adm.br...owser_selector/

یعنی باید برا کروم کل استایل ها رو از نو طراحی کنم؟

این بخش که الان این مشکل رو داره، فایل استایل جداگانه نداره و استایلش رو تو خود کدهای افزونه نوشته.

لینک به ارسال

یعنی باید برا کروم کل استایل ها رو از نو طراحی کنم؟

این بخش که الان این مشکل رو داره، فایل استایل جداگانه نداره و استایلش رو تو خود کدهای افزونه نوشته.

نه! فقط برای همین قسمت که مشکل داره استایل رو بنویسید. یا اینکه باید استایل اصلی رو تغییر بدید تا مشکلی در کروم نداشته باشه.

لینک به ارسال

اگه بشه استایل اصلی رو تغییر بدم که بسیار عالی میشه.

میشه یه نگاهی به ای بخش بکنید و یه راهنمایی کنید.

ممنون

لینک به ارسال

من بخشی که فکر میکنم مشکل از اینجا باشه رو پیدا کردم:


$content .= " <img $imgStyle id=\"up-$ck_comment_ID\" src=\"{$plugin_path}/images/$imgUp\" style=\"cursor:pointer;margin:0px 30px;\" alt=\"".__('', 'ckrating') ."\" $onclick_add />";
if ( get_option('ckrating_value_display') != 'one' )
$content .= " <span id=\"karma-{$ck_comment_ID}-up\" $likesStyle>{$ck_cache['ck_rating_up']}</span>";
}
if ( get_option('ckrating_vote_type') != 'likes' )
{
$content .= " <img $imgStyle id=\"down-$ck_comment_ID\" src=\"{$plugin_path}/images/$imgDown\" style=\"cursor:pointer;margin:0px -23px;\" alt=\"". __('', 'ckrating')."\" $onclick_sub />"; //Phew
if ( get_option('ckrating_value_display') != 'one' )
$content .= " <span id=\"karma-{$ck_comment_ID}-down\" $dislikesStyle>{$ck_cache['ck_rating_down']}</span>";

الان من تو این کد یه مارجین به هر کدوم از دکمه ها دادم که این مارجین رو فایر فاکس میخونه ولی کروم نمیخونه. فکر کنم اشتباه دادم. الان کد استایل دهی به این قسمت ها به این شکله:


style=\"cursor:pointer;margin:0px -23px;\"

که قبلش اینجوری بود:


style=\"cursor:pointer \"

این کد درست هست؟ این کاراکتر '/' و " رو به چه صورت قرار بدم؟

لینک به ارسال

اگه تو فایرفاکس نگاه کنی اینطور نیست.

نمیدونم شاید مارجینی که تو اون بخش اضافه کردم اشتباه بوده و باعث شده cursor:pointer هم تو کروم خونده نشه ولی تو فایر فاکس درسته


style=\"cursor:pointer;margin:0px -23px;\"

لینک به ارسال

خوب بجای اینکار این مشخصات را در style.css اضافه کنید و به تصاویر یک کلاس بدید در اسنادت html گاهی کروم یک فاصله را نممی خونه و باعث می شه -23 شما به 0px قبلی بچسبه (بخاطر علامت منفی)

لینک به ارسال

میشه راهنمایی کنید آیدی یا کلاسش چیه؟

تو کدها که اینجوری زده:


id=\"up-$ck_comment_ID\"
id=\"down-$ck_comment_ID\"


لینک به ارسال

میشه راهنمایی کنید آیدی یا کلاسش چیه؟

تو کدها که اینجوری زده:


id=\"up-$ck_comment_ID\"
id=\"down-$ck_comment_ID\"


متغیر هست! خودتون یه آی دی یا کلاس دلخواه دیگه بدید، یا باید از سلکتورهای خاص استفاده کنید.

ویرایش شده توسط Anisi
لینک به ارسال


class=\"up-rating\"
class=\"down-rating\"

و


.down-rating {
cursor:pointer;
margin:0px;
margin-right: -23px;
}
.up-rating {
cursor:pointer;
margin:0px;
margin-left: -23px;
}

لینک به ارسال

آنیسی جان نمیدونم چطور باید از سلکتور استفاده کنم. یا اینکه چطور بهش ایدی بدم. میشه یه راهنمایی کنی؟

ممنون

ویرایش شده توسط fantome0
لینک به ارسال

درستش کردم بین دو خاصیت یه اسپیس زدم درست شد.


style=\"cursor:pointer; margin:0px 30px;\"

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

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

---------------

البته با این اسپیسی که زدم تو فایر فاکس خراب شد!

ویرایش شده توسط fantome0
لینک به ارسال

آنیسی جان نمیدونم چطور باید از سلکتور استفاده کنم. یا اینکه چطور بهش ایدی بدم. میشه یه راهنمایی کنی؟

ممنون

خوب خداروشکر مشکلتون حل شد. راستی، اَنیسی درست هست.

ویرایش شده توسط Anisi
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...