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

[::AmiR:: 258]

درود فراوان

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

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

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

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

[Morteza 34190]

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

[imanfakhar 26231]

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

[::AmiR:: 258]

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

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

ویرایش شده اردیبهشت 92 توسط amir1909

[Morteza 34190]

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

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

[fantome0 40]

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

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

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

[Morteza 34190]

کجاش بهم میریزه؟

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

[fantome0 40]

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

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

[imanfakhar 26231]

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

[fantome0 40]

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

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

[Anisi 301]

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

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

[fantome0 40]

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

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

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

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

[Anisi 301]

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

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

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

[fantome0 40]

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

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

ممنون

[fantome0 40]

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

$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 \"

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

[Anisi 301]

الان در نسخه آنلاین، مارجین و پدینگ 0 هست.

[fantome0 40]

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

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

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

[imanfakhar 26231]

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

[fantome0 40]

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

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

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

[Anisi 301]

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

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

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

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

ویرایش شده مرداد 92 توسط Anisi

[imanfakhar 26231]

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 40]

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

ممنون

ویرایش شده مرداد 92 توسط fantome0

[fantome0 40]

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

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

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

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

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

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

ویرایش شده مرداد 92 توسط fantome0

[Anisi 301]

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

ممنون

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

ویرایش شده مرداد 92 توسط Anisi