انجمن


مشکل قالب با IE  (۱۵ نوشته)

  • میثم الله‌داد

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۵
    تشکر شده: ۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۳:۳۷

    من جستجو زیاد انجام دادم و می‌دونم این مشکل خیلی عمومی هست ولی از اون‌جایی که هر ایراد راه حل خودش رو داره مجبور شدم اینجا مطرحش کنم، چون هیچ‌کدوم از راهنمایی‌هایی که من پیدا کردم؛ برای من جواب نداد.
    قالب من با ورژن‌های هفت به پائین IE مشکل داره و متأسفانه نتونستم ایرادیابی‌اش کنم. HTML رو Validate کردم؛ CSS رو Validate کردم؛ ولی جواب نگرفتم. یعنی در اصل فکر می‌کنم ایراد اصلی یا از Scrip ها هست یا از کدهای PHP، ولی از کجا؟ نمی‌دونم و نتونستم پیدا کنم. از اون‌جایی که به‌هم ریختگی طوری هست که روی اصل مطالب تأثیر منفی می‌ذاره، مجبورم که برطرفش کنم. لطفاً اگر پاسخی به ذهنتون می‌رسه راهنمایی کنید.
    آدرس سایت: http://maysam.allahdad.com

  • رضا ش

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۶۲
    تشکر شده: ۲۱۷ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۴:۱۸

    میثم جان!
    کد پی اچ پی به هیچ عنوان ربطی به مرورگر نداره!

    در حقیقت مشکل از خود IE!
    تموم دنیا دارن داد میزنن که از IE استفاده نکنید واسه همین میگن!

    مشکلت رو هم بیخیال شو چون با ie7 که مشکل نداری دیگه درسته؟

    الان کمتر کسی با ورژن پائینتر از 7 میاد

  • میثم الله‌داد

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۵
    تشکر شده: ۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۴:۲۰

    رضا جان متأسفانه با IE7 و پایین‌تر مشکل دارم.

  • رضا ش

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۶۲
    تشکر شده: ۲۱۷ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۵:۳۶

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

  • میثم الله‌داد

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۵
    تشکر شده: ۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۵:۳۸

    اگه ایراد از CSS بود که رفعش می‌کردم. ایراد از استایل نیست.

  • mortezq21

    آفلاین
    عضو
    تعداد نوشته‌ها: ۹۳
    تشکر شده: ۳۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۷:۲۷

    یک نظر در باره قالب شما شاید کار ساز بود.
    حالت Compatible را در اینترنت اکسبلورر (در هدر php دستور را قرار دهید) غیر فعال کنید به احتمال زیاد در IE8,9 مشکلی نخواهید داشت و احتمالا در IE7

  • میثم الله‌داد

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۵
    تشکر شده: ۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۷:۴۱

    مرتضی جان من این رو نفهمیدم:

    حالت Compatible را در اینترنت اکسبلورر (در هدر php دستور را قرار دهید) غیر فعال کنید.

  • mortezq21

    آفلاین
    عضو
    تعداد نوشته‌ها: ۹۳
    تشکر شده: ۳۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۴ اسفند ۱۳۹۰ - ۱۷:۵۲

    من سی اس اس قالب شما را تا حدودی بررسی کردم .سی اس اس قالب شما برای مرورگرهای پیشرفته نوشته شده و در آن اینترنت اکسپلورر لحاظ نشده به قول دوستمان یا استایل جداگانه بنویسید یا اینکه از دستور ریست استفاده کنید و استایل ریست برای اینترنت اکسپلورر قرار دهید.
    برای نمونه استایل قالب شما
    border-top-right-radius:4px;border-top-left-radius:4px;-moz-border-top-right-radius:4px;-moz-border-top-left-radius:4px;margin:0px
    این دستورات گرد کردن گوشه ها توسط css3 است که در این دستورات اینترنت اکسپلوور نمیتواند آنرا بخواند و برای فیکس کردن باید از اسکریپت استفاده کرد و همچنین مشکل عمده از خاصیت z index که در سی اس اس
    قالب شما استفاده شده (جابجایی منوهای باز شونده )معیار عددی z index درست لحاظ نشده
    در ابتدا شما این دستور را در هدر php برای غیر فعال کردن حالت Compatible در اینترنت اکسپلورر قرار دهید اگه مشکل داشتید استایل باید باز بینی شود.
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8,9" />

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    رضا ش - میثم الله‌داد
  • میثم الله‌داد

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۵
    تشکر شده: ۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۵ اسفند ۱۳۹۰ - ۰۰:۲۲

    مرتضی جان ممنونم. من اغلب قسمت‌های CSS رو خودم نوشتم. بعد برای اطمینان تمام اون کدهای radius رو حذف کردم، ولی درست نشده بود. موردی که شما گفتی رو هم چک کردم و باز مشکل داشتم. یعنی همون Compatible Mode
    تنها چیزی که الآن می‌مونه توی مواردی که شما گفتی: z-index هست. به نظرت اگر درست عدد دهی نکرده بودم، توی بقیه مرورگرها هم نباید اشتباه نشون می‌داد؟ من با یکی از ناظم‌ها صحبت کردم و اون هم احتمال داد که از نسخه‌ی جی-کوئری فراخوان شده باشه. اگه ارورهای اسکریپت رو روشن داشته باشی، می‌بینی که به اسکریپت‌ها ایراد می‌گیره. ولی من نمی‌دونم کجاش هست.

  • mortezq21

    آفلاین
    عضو
    تعداد نوشته‌ها: ۹۳
    تشکر شده: ۳۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۵ اسفند ۱۳۹۰ - ۰۱:۳۶

    منظورم حذف اون کد ها نبود .اونها نتها گوشه های عناصر را گرد می کنه
    و ربطی به جابجایی عناصر در قالب شما نداره اینها css3 هستند که در مرورگرهای پیشرفته که IE9 هم شاملش میشه ،
    اجرا میشه.
    این مثال بود از عدم تطبیق کد ها ی شما با IE6,7,8 و ربطی به مشکل نداره

  • mortezq21

    آفلاین
    عضو
    تعداد نوشته‌ها: ۹۳
    تشکر شده: ۳۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۵ اسفند ۱۳۹۰ - ۰۱:۳۹

    منظورم حذف radius نبود اون را فقط برای مثال گفتم که شما از css3 استفاده کردید و خیلی جاهای دیگه که اینترنت اکسپلورر نمیتونه بخونه.
    در مورد z-index که قرار گیری هر عنصری را مشخص می کند شما ابتدا از 1000 شروع کنید و به مراتب 999 و 995 به همین منوال بر اساس قرار گیری عناصر مقدار را مشحص کنید . اینترنت اکسپلورر تنها از این نوع پشتبیبانی می کنه
    در مورد قرار دادن کد در هدر php مشکل حالت Compatible را در IE8,9 حل میکنه یعنی اگه بازدید کننده مرورگر IE8 or 9 خود را روی حالت Compatible قرار دهد، با نبودن این کد دقیقا همان جابجایی منو ها را که در IE7 دارید خواهی داشت.
    تا اینجا شما در مرورگر ie 8,9 را که در دو حالتشان چهار تا بودند را مهار کردید.
    2:شما از اعداد منفی در قرار گیری عناصر استفاده کردید که این هم در IE7 به مشکل می خورد.
    3: اگه اشتباه نکنم در قسمت منو شما position را fixed تعیین کرده بودید در این صورت محل قرار گیری از روی کل صفحه
    محاسبه می شود ومقدار های شما بی اثر خواهد بود البته در IE 7 و حالت Compatible IE8,9 .
    پس شما position را روی relative قرار دهید بعد مقدار را بر حسب پیکسل وارد کنید یعنی بالا پایین چپ و راست عنصر را
    نسبت به عنصر در بر گیرنده
    در مورد حذف دکمه Compatible از8,9 IE که از این هک
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8,9" />
    استفاده میکنیم منظورم این دکمه است تصویر
    امتحان کنید شما فعلا کد را در هدر درست قرار ندادید این کلید هنوز فعال است. با کلیک بر روی این دکمه قالب دقیقا مشکل IE7 را پیدا می کند.از این نتیجه میگیریم که مشکل اسکریپت نیست فقط سی اس اس مشکل داره.
    البته در 8 IE
    میدانید که از منوی تنظیمات این حالت فعال میشه.
    بلاگ شما را مختصر خواندم قلم زیبایی دارید.

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    میثم الله‌داد -
  • kohaix

    آفلاین
    عضو
    تعداد نوشته‌ها: ۱۶
    # نوشته شده: ۷ سال پیش
    ۲۵ اسفند ۱۳۹۰ - ۱۰:۴۹

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

  • میثم الله‌داد

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۵
    تشکر شده: ۶ بار
    # نوشته شده: ۷ سال پیش
    ۲۵ اسفند ۱۳۹۰ - ۱۴:۵۰

    مرتضی جان تشکر هم بابت این‌که وقت گذاشتی و پاسخ‌های مفصلی دادی، هم بابت این‌که وبلاگ رو خوندی و نظر دادی :)
    من تازه فهمیدم اون هک هدر به چه دردی می‌خوره، دیشب گذاشتم و بعد برش داشتم. الآن ولی مجدد می‌گذارم که دیگه اون دکمه وجود نداشته باشه برای مرورگرها. ممنون.
    بقیه‌ی موارد رو چک می‌کنم و نتیجه رو همین‌جا اعلام می‌کنم.

  • rcm27

    آفلاین
    عضو
    تعداد نوشته‌ها: ۹
    # نوشته شده: ۶ سال پیش
    ۶ مرداد ۱۳۹۲ - ۰۳:۳۴

    maysam گفت:
    رضا جان متأسفانه با IE7 و پایین‌تر مشکل دارم.

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

  • aref.shams.2

    آفلاین
    عضو
    تعداد نوشته‌ها: ۲۲
    تشکر شده: ۱۱ بار
    # نوشته شده: ۴ سال پیش
    ۳۱ خرداد ۱۳۹۴ - ۰۹:۵۹

    سلام دوستان من یه افزونه نمایش پست دارم با مرورگر IE مشکل داره و مثلا با IE 11 چک کردم درسته ولی با 9 درست نیست
    تو کد css اینا هست می شه راهنمایی کنید
    میخوام با همه ورژن ها سازگار باشه

    /**
    * SRP LAYOUT CSS
    * Package: special-recent-posts-free
    * Version: 2.0.4
    * Author: Luca Grandicelli <lgrandicelli@gmail.com>
    * Copyright (C) 2011-2014 Luca Grandicelli
    * The stylesheet of the SRP widget layout
    */
    
    /**
     * --------------------------------
     * THE WIDGET TITLE
     * --------------------------------
    */
    .srp-widget-title {}
    
    /**
     * --------------------------------
     * THE POSTS CONTAINER
     * --------------------------------
    */
    .srp-widget-container {
    	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    	display: -ms-flexbox;  /* TWEENER - IE 10 */
    	display: -webkit-flex; /* NEW - Chrome */
    	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
    
    	    -webkit-box-orient : vertical;
    	       -moz-box-orient : vertical;
    	-webkit-flex-direction : column;
    	   -moz-flex-direction : column;
    	    -ms-flex-direction : column;
    	        flex-direction : column;
    
    	-webkit-flex-wrap : nowrap;
    	   -moz-flex-wrap : nowrap;
    	    -ms-flex-wrap : nowrap;
    	        flex-wrap : nowrap;
    }
    
    /**
     * --------------------------------
     * THE SINGLE POST
     * --------------------------------
    */
    .srp-widget-singlepost {
    	border-bottom  : 1px solid #ccc;
    	margin-bottom  : 10px;
    	padding-bottom : 10px;
    }
    
    .srp-widget-container > .srp-widget-singlepost:last-child {
    	border-bottom  : 0;
    	margin-bottom  : 0;
    	padding-bottom : 0;
    }
    
    .srp-post-content-container {
    	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    	display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    	display: -ms-flexbox;  /* TWEENER - IE 10 */
    	display: -webkit-flex; /* NEW - Chrome */
    	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }
    
    .srp-thumbnail-position-default {
    	-webkit-box-orient: horizontal;
           -moz-box-orient: horizontal;
           -webkit-flex-direction: row;
              -moz-flex-direction: row;
               -ms-flex-direction: row;
                   flex-direction: row;
    
    	     -webkit-flex-wrap: nowrap;
    	        -moz-flex-wrap: nowrap;
    	         -ms-flex-wrap: nowrap;
    	             flex-wrap: nowrap;
    }
    
    /**
     * --------------------------------
     * THE THUMBNAIL BOX
     * --------------------------------
    */
    .srp-thumbnail-box {
    	margin-right: 20px;
    }
    
    .srp-post-thumbnail-link {
    	display: block;
    }
    
    .srp-thumbnail-box img {
    	height: auto;
    }
    
    /**
     * --------------------------------
     * THE CONTENT BOX
     * --------------------------------
    */
    .srp-content-box {
    	-webkit-box-flex: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
           -moz-box-flex: 1;   /* OLD - Firefox 19- */
                 width: 20%;   /* For old syntax, otherwise collapses. */
            -webkit-flex: 1;   /* Chrome */
                -ms-flex: 1;   /* IE 10 */
                    flex: 1;   /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }
    
    .srp-content-box .srp-post-date,
    .widget-area .widget .srp-post-date {
    	margin: 0 0 10px;
    }
    
    .srp-content-box .srp-post-title,
    .widget-area .widget .srp-post-title {
    	margin: 0;
    }
    
    /**
     * --------------------------------
     * THE POST TITLE
     * --------------------------------
    */
    .srp-content-box .srp-post-title,
    .widget-area .widget .srp-post-title {
      margin: 0;
    }
    
    .srp-content-box .srp-post-stringbreak-link {
      margin: 0 5px;
    }
    
    /**
     * --------------------------------
     * THE POST CONTENT
     * --------------------------------
    */
    .srp-content-box .srp-post-content,
    .widget-area .widget .srp-post-content {
    	margin: 0;
    }
    
    /**
     * --------------------------------
     * MEDIA QUERIES
     * --------------------------------
    */
    
    /* Max-width 640px, mobile-only styles, use when QAing mobile issues */
    @media only screen and (max-width: 40em) {
    
    	/**
    	 * --------------------------------
    	 * The Single Post
    	 * --------------------------------
    	*/
    	.srp-post-content-container {
    	-webkit-box-orient: vertical;
           -moz-box-orient: vertical;
      -webkit-flex-direction: column;
       	 -moz-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
    
    	   -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
               -ms-flex-wrap: nowrap;
                   flex-wrap: nowrap;
    	}
    
    	.srp-content-box {
    		-webkit-box-flex: none;   /* OLD - iOS 6-, Safari 3.1-6 */
    	       -moz-box-flex: none;   /* OLD - Firefox 19- */
    	               width: auto;   /* For old syntax, otherwise collapses. */
    	        -webkit-flex: none;   /* Chrome */
    	            -ms-flex: none;   /* IE 10 */
    	                flex: none;   /* NEW, Spec - Opera 12.1, Firefox 20+ */
    	}
    
    	/**
    	 * --------------------------------
    	 * The Thumbnail Box
    	 * --------------------------------
    	*/
    	.srp-thumbnail-box {
    		margin: 0 0 10px;
    	}
    
    }

    ممنون

درباره‌ی این موضوع



برچسب‌ها