رفتن به مطلب

مشکل در نمایش رنگهای gradient و عکس در فایرفاکس


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

سلام .

ببخشید یه مشکل اساسی واسم پیش اومده و اون اینه که اگه بخوام در css قالب ، رنگ ها رو به صورت gradient نشون بدم و یا اینکه بخوام در css ، یک عکس رو در کنار یه باکس بزارم ، در مرورگر کروم هیچ مشکلی نداره و کامل نشون میده ولی در فایرفاکس نشون نمیده .

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

با تشکر .

لینک به ارسال

باید برای هر مرورگر کد جداگون قرار بدین

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

شما باید در این حالت باید به ابتدای کدتون برای موزبلا از -moz- استفاده کنین مثلا :


-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;

وقتی میخواین کد خاصی بنویسین باید سرچ کنین و ببینین که مرورگر های متفاوت چطوری از این خاصیت css پشتیبانی میکنن

لینک به ارسال

باید برای هر مرورگر کد جداگون قرار بدین

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

شما باید در این حالت باید به ابتدای کدتون برای موزبلا از -moz- استفاده کنین مثلا :


-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;

وقتی میخواین کد خاصی بنویسین باید سرچ کنین و ببینین که مرورگر های متفاوت چطوری از این خاصیت css پشتیبانی میکنن

تشکر بابت توضیحاتتون .

پس با این حساب ، هیچ کد واحدی وجود نداره که در این مورد بشه واسه همه ی مرورگرها از یک کد استفاده کرد ؟

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

1- جایی که میخوام عکس کنار باکس باشه که کدهاش به شکل زیره :


.box1{
background-image:url(images/AKS.JPG),-webkit-linear-gradient(top, #000000, #ffffff);
background-position:right center, left top;
background-repeat:no-repeat, repeat;
border-right:4px solid #000000;
font-size:10px;
font-weight:bold;
padding:2px 30px 2px 5px;
width: 300px;
height: 70px;
color:#000000;
}

2- جایی که میخوام رنگ باکس به صورت gradient باشه که کدهاش به شکل زیره :


.box2 {
border:1px solid #000000 ;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#ffffff),color-stop(0.02,#000000),color-stop(1,#000000)) !important;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px Black;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}

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

حالا طبق صحبتهای شما ، دو کد بالا رو چه جوری باید واسه فایرفاکس و مرورگرهای دیگه هم بهینه کنم که تو همه ی مرورگرها به صورت کامل و بدون مشکل نشون بده ؟

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

خیلی خیلی ممنون .

لینک به ارسال

شما باید کدهای css رو که میخواین استاندارد باشه طبق این وب سایت www.w3schools.com کد بزنین

بطور مثال برای گرادینت باید طبق این اصول برین جبو

همچنین پشتیبانی مرورگرهای متفاوت از این گرادینت رو نوشته

http://www.w3schools.com/css/css3_gradients.asp

لینک به ارسال

شما باید کدهای css رو که میخواین استاندارد باشه طبق این وب سایت www.w3schools.com کد بزنین

بطور مثال برای گرادینت باید طبق این اصول برین جبو

همچنین پشتیبانی مرورگرهای متفاوت از این گرادینت رو نوشته

http://www.w3schools...3_gradients.asp

این لینک به زبان انگلیسی بود و بنده تسلط زیادی به این زبان ندارم و متأسفانه ظاهرا اکثر منابع هم به زبان انگلیسی هست .

به همین دلیلم نتونستم جوابمو پیدا کنم .

ممنون میشم اگه کسی به زبان انگلیسی مسلطه و یا در این زمینه اطلاعات کافی داره ، لطف کنه و بگه که کدهای بالا که دادم به چه شکل باید نوشته بشه تا مرورگرها پشتیبانی کنن و مشکلی نداشته باشه ؟

لینک به ارسال

دوست عزیز نیازی به ترجمه نیست کافیه فقط شما دقت کنید

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

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

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

http://www.cssmatic.com/

http://www.gradient-animator.com/

لینک به ارسال
دوست عزیز نیازی به ترجمه نیست کافیه فقط شما دقت کنید یه جدول وسط صفحه هست که پشتیبانی ورژن مرورگر ها از خاصیت گرادینت رو نشون میده بعد پایین تر چند تا مثال زده که بهتر درک کنید کد نویسی و نحوه عملکردشو این هم دو تا سایت برای ساخت کد گرادنت آنلاین : http://www.cssmatic.com/ http://www.gradient-animator.com/

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

فقط یه سؤال : اگه کدی که این ژنراتور بعد از ساختن کد گرادنت میده رو عینا کپی و داخل کدهای سایت بزارم ، آیا تمام مرورگرهای شناخته شده رو پشتیبانی میکنه و در هر مرورگر ، استایل رنگ رو به درستی نشون میده ؟

لینک به ارسال

سلام

بله

در مورد کروم لازم بدونید خود مرورگر یک سری کدهای پیشرف داره (با نام user agent stylesheet) لذا نیاز کمتری به تنظیم cssها هست

برای برطرف شدن بعضی از این مشکل ها هم حتما از css reset استفاده کنید

که نمونه‌هاش خیلی زیاد هست مثلا در این آدرس بعضی از این کدها وجود داره.

لینک به ارسال

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

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

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

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

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

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

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

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

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