ভাসমান ধারক যে ফ্লেক্স আইটেমের শীর্ষে স্ক্রোল করতে পারে না

Question

সুতরাং, ফ্লেক্সবক্স ব্যবহার করে একটি দরকারী মডেল তৈরির প্রয়াসে, আমি খুঁজে পেয়েছি যা ব্রাউজারের সমস্যা বলে মনে হচ্ছে এবং এটির কীভাবে সমাধান করবেন সে সম্পর্কে ধারণা বা জ্ঞাত সমাধান আছে কিনা তা নিয়ে আমি ভাবছি।

আমি যে বিষয়টি সমাধান করার চেষ্টা করছি তার দুটি দিক রয়েছে। প্রথমে, মোডাল উইন্ডোটি উল্লম্বভাবে কেন্দ্রিক হওয়া, যা প্রত্যাশা অনুযায়ী কাজ করে। দ্বিতীয়টি হল মোডাল উইন্ডোটি স্ক্রোল করা - বাহ্যিকভাবে, সুতরাং পুরো মোডাল উইন্ডোটি স্ক্রল করে, এর মধ্যে থাকা সামগ্রীগুলি নয় (এটি আপনার ড্রপডাউন এবং অন্যান্য ইউআই উপাদান থাকতে পারে যা মডেলের সীমানার বাইরে প্রসারিত করতে পারে - একটি কাস্টম তারিখ চয়নকারী ইত্যাদি)

যাইহোক, স্ক্রোল বারগুলির সাথে উল্লম্ব কেন্দ্রীকরণের সংমিশ্রণ করার সময়, উপচে পড়া শুরু হওয়ার সাথে সাথে মডালের শীর্ষটি অ্যাক্সেসযোগ্য হয়ে উঠতে পারে। উপরের উদাহরণে, আপনি ওভারফ্লোকে জোর করার জন্য আকার পরিবর্তন করতে পারেন, এবং এটি করে এটি আপনাকে মডেলের নীচে স্ক্রোল করতে দেয় তবে শীর্ষে নয় (প্রথম অনুচ্ছেদটি কাটা হয়েছে)।

এখানে উদাহরণ কোডের লিঙ্কটি দেওয়া হয়েছে (অত্যন্ত সরলীকৃত)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

এই প্রভাবগুলি (বর্তমান) ফায়ারফক্স, সাফারি, ক্রোম এবং অপেরা .. আপনি যদি আইই 10 ভেন্ডার প্রিফিক্সড সিএসএস-তে মন্তব্য করেন তবে এটি আকর্ষণীয়ভাবে আই 10 তে সঠিকভাবে আচরণ করে - আমি এখনও আই 11 এ পরীক্ষায় বিরক্ত করি নি, তবে ধারণা করি যে আই 10 এর সাথে মেলে ।

কোন ধারণা ভাল হবে। জ্ঞাত সমস্যাগুলির লিঙ্কগুলি, বা এই আচরণের পিছনে যুক্তি যুক্ত হওয়াও কার্যকর হবে।

Answer 1

সমস্যাটি

ফ্লেক্সবক্স কেন্দ্রিংকে খুব সহজ করে তোলে।

কেবলমাত্র প্রয়োগ align-items: centerএবং justify-content: centerফ্লেক্স ধারকটিতে, আপনার ফ্লেক্স আইটেমগুলি উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রিক হবে।

যাইহোক, ফ্লেক্স আইটেমটি ফ্লেক্স ধারকের চেয়ে বড় হলে এই পদ্ধতিতে সমস্যা রয়েছে।

প্রশ্নে উল্লিখিত হিসাবে, ফ্লেক্স আইটেমটি ধারকটি যখন প্রবাহিত হয় তখন শীর্ষটি অ্যাক্সেসযোগ্য হয়ে যায়।

অনুভূমিক ওভারফ্লোর জন্য, বাম বিভাগটি অ্যাক্সেসযোগ্য (বা ডান বিভাগ, আরটিএল ভাষায়) হয়ে যায়।

এখানে এলটিআর ধারক justify-content: centerএবং তিনটি ফ্লেক্স আইটেমের উদাহরণ রয়েছে :

এই আচরণের ব্যাখ্যার জন্য এই উত্তরটির নীচে দেখুন।

---

সমাধান # 1

এই সমস্যা সমাধানের জন্য ব্যবহার flexbox স্বয়ংক্রিয় মার্জিন পরিবর্তে, justify-content।

সঙ্গে autoমার্জিন, একটি সজল আনমন আইটেমটি উল্লম্বভাবে এবং অনুভূমিকভাবে এর কোন অংশ অ্যাক্সেস হারানো ছাড়া কেন্দ্রিক করা যেতে পারে।

সুতরাং ফ্লেক্স ধারকটিতে এই কোডের পরিবর্তে:

#flex-container {
    align-items: center;
    justify-content: center;
}

ফ্লেক্স আইটেমটিতে এই কোডটি ব্যবহার করুন:

.flex-item {
    margin: auto;
}

সংশোধিত ডেমো

---

সমাধান # 2 (এখনও বেশিরভাগ ব্রাউজারে প্রয়োগ করা হয়নি)

safeআপনার কীওয়ার্ড প্রান্তিককরণ নিয়মে এই মানটি যুক্ত করুন :

justify-content: safe center

অথবা

align-self: safe center

থেকে সিএসএস বক্স সারিবদ্ধতা মডিউল স্পেসিফিকেশন :

4.4। ওভারফ্লো সারিবদ্ধতা: safeএবং unsafeকীওয়ার্ড এবং স্ক্রল নিরাপত্তা সীমা

[ফ্লেক্স আইটেম] যখন [ফ্লেক্স ধারক] এর চেয়ে বড় হয়, তখন এটি উপচে পড়বে। কিছু প্রান্তিককরণ মোড, যদি এই পরিস্থিতিতে সম্মানিত হয় তবে ডেটা ক্ষতি হতে পারে: উদাহরণস্বরূপ, যদি কোনও সাইডবারের বিষয়বস্তু কেন্দ্রিক হয়, যখন তারা উপচে পড়ে থাকে তবে তারা ভিউপোর্টের শুরু প্রান্তের পাশের তাদের বাক্সগুলির কিছু অংশ প্রেরণ করতে পারে, যা এখানে স্ক্রল করা যায় না to ।

এই পরিস্থিতি নিয়ন্ত্রণ করতে, একটি ওভারফ্লো প্রান্তিককরণ মোড স্পষ্টভাবে নির্দিষ্ট করা যেতে পারে। Unsafeপ্রান্তিককরণ অতিরিক্ত প্রবাহ পরিস্থিতিতে নির্দিষ্ট প্রান্তিককরণ মোডকে সম্মান করে, এমনকি এটি ডেটা হ্রাস ঘটায়, অন্যদিকে safeঅ্যালাইনমেন্ট তথ্য ক্ষতি হ্রাস করার প্রয়াসে প্রবাহ পরিস্থিতিগুলিতে প্রান্তিককরণ মোড পরিবর্তন করে।

ডিফল্ট আচরণ হ'ল স্ক্রোলযোগ্য অঞ্চলের মধ্যে প্রান্তিককরণ বিষয়বস্তু থাকা, যদিও লেখার সময় এই সুরক্ষা বৈশিষ্ট্যটি এখনও প্রয়োগ করা হয়নি।

safe

যদি [ফ্লেক্স আইটেমটির আকার] [ফ্লেক্স ধারক] উপচে পড়ে যায় তবে [ফ্লেক্স আইটেম] এর পরিবর্তে এমনভাবে সাজানো হয় যেন সাজানো মোড [ flex-start] ছিল।

unsafe

[ফ্লেক্স আইটেম] এবং [ফ্লেক্স ধারক] এর আপেক্ষিক আকারের নির্বিশেষে প্রদত্ত সারিবদ্ধ মানটি সম্মানিত।

দ্রষ্টব্য: বক্স অ্যালাইনমেন্ট মডিউলটি কেবল নমনীয় নয়, একাধিক বাক্স বিন্যাসের মডেলগুলিতে ব্যবহারের জন্য। সুতরাং উপরে বর্ণিত অংশে, বন্ধনীগুলির শর্তাদি আসলে "প্রান্তিককরণ বিষয়", "প্রান্তিককরণ ধারক" এবং " start" বলে। আমি এই বিশেষ সমস্যার উপর দৃষ্টি নিবদ্ধ রাখতে ফ্লেক্স-নির্দিষ্ট শর্তাদি ব্যবহার করেছি।

---

এমডিএন থেকে স্ক্রোল সীমাবদ্ধতার জন্য ব্যাখ্যা:

নমনীয় আইটেম বিবেচনা

ফ্লেক্সবক্সের প্রান্তিককরণ বৈশিষ্ট্য সিএসএসের অন্যান্য কেন্দ্রিক পদ্ধতির মত নয়, "সত্য" কেন্দ্রীকরণ করে। এর অর্থ হ'ল ফ্লেক্স আইটেমগুলি কেন্দ্রে থাকবে, এমনকি যদি তারা ফ্লেক্স ধারকটি উপচে পড়ে যায়।

এটি কখনও কখনও সমস্যাযুক্ত হতে পারে, তবে যদি তারা পৃষ্ঠার উপরের প্রান্ত, বা বাম প্রান্তটি অতিক্রম করে তবে [...], আপনি সেখানে area অঞ্চলে স্ক্রোল করতে পারবেন না, এমনকি সেখানে সামগ্রী থাকলেও!

ভবিষ্যতের প্রকাশে, সারিবদ্ধ বৈশিষ্ট্যগুলিকে পাশাপাশি একটি "নিরাপদ" বিকল্প রাখতে প্রসারিত করা হবে।

আপাতত, যদি এটি উদ্বেগজনক হয় তবে আপনি এর পরিবর্তে কেন্দ্রিকতা অর্জনের জন্য মার্জিনগুলি ব্যবহার করতে পারেন, কারণ তারা "নিরাপদ" উপায়ে প্রতিক্রিয়া জানাবে এবং সেগুলি প্রবাহিত হলে কেন্দ্রিকরণ বন্ধ করবে।

বৈশিষ্ট্যগুলি ব্যবহার করার পরিবর্তে, আপনি যে ফ্লেক্স আইটেমগুলিকে কেন্দ্র করতে চান তাতে align-কেবল autoমার্জিন রাখুন।

justify-বৈশিষ্ট্যের পরিবর্তে, প্রথম এবং শেষ ফ্লেক্স আইটেমগুলির বাইরের প্রান্তগুলিতে ফ্লেক্স ধারকটিতে অটো মার্জিন রাখুন।

autoমার্জিন "আনমন" এবং অবশেষ স্থান অনুমান করবে আনমন আইটেম কেন্দ্র করে যখন সেখানে স্থান অবশেষ, এবং যখন সাধারণ প্রান্তিককরণ স্যুইচ করা হচ্ছে।

তবে, আপনি যদি justify-contentএকাধিক-লাইন ফ্লেক্সবক্সে মার্জিন-ভিত্তিক কেন্দ্রীকরণের সাথে প্রতিস্থাপনের চেষ্টা করছেন, তবে আপনি সম্ভবত ভাগ্য থেকে দূরে রয়েছেন, কারণ আপনাকে প্রতিটি লাইনের প্রথম এবং শেষ ফ্লেক্স আইটেমটির মার্জিন স্থাপন করা দরকার। কোন আইটেমগুলি কোন লাইনে শেষ হবে তার আগে আপনি যদি ভবিষ্যদ্বাণী করতে না পারেন তবে justify-contentসম্পত্তিটি প্রতিস্থাপনের জন্য আপনি মূল অক্ষটিতে নির্ভরযোগ্যভাবে মার্জিন-ভিত্তিক কেন্দ্রে ব্যবহার করতে পারবেন না ।

Comments

হ্যাঁ, এটি একটি আরও ভাল সমাধান এবং অতিরিক্ত মূল্যবান অন্তর্দৃষ্টি দেওয়ার জন্য আপনাকে ধন্যবাদ।

— jejacks0n

এটি লক্ষ করা উচিত যে এটি আই 11 এ কাজ করে না। পটভূমি কেটে যাবে।

— ড্যানিয়েল

@ ড্যানিয়েল, আমি কেবল আইই ১১ এ কোডটি পরীক্ষা করেছি। কিছুই অ্যাক্সেস অযোগ্য। প্রকৃতপক্ষে, প্রশ্নটিতে বর্ণিত সমস্যা এমনকি আই 11 এ বিদ্যমান নেই। আপনি কেবল আইই 11 এ পাঠ্য ওভারফ্লো ঘটছে উল্লেখ করছেন। এটি অন্য প্রশ্নের জন্য অন্য একটি সমস্যা।

— মাইকেল বেঞ্জামিন

আইই ১১-তে সমস্যা সমাধানের জন্য: align-items: flex-startফ্লেক্স পাত্রে যুক্ত করুন এবং margin: autoফ্লেক্স আইটেমটির জন্য রাখুন।

— ইউজিন ফিদেলিন

ফ্লেক্স-দিকনির্দেশ: কলাম ব্যবহার করার সময় এটি আমার পক্ষে কাজ করে না;

— স্টিফান

Answer 2

ঠিক আছে, যেমন মার্ফির আইন হিসাবে এটি ছিল, এই প্রশ্নটি পোস্ট করার পরে আমি যে পাঠটি করেছি তার ফলস্বরূপ কয়েকটি ফলাফল হয়েছিল - সম্পূর্ণ সমাধান হয়নি, তবে কিছুটা হলেও কার্যকর।

আমি পোস্ট করার আগে কিছুটা কমপক্ষে উচ্চতা নিয়ে খেলেছি, তবে অনুমানের ক্ষেত্রে মোটামুটি নতুন যে অন্তর্নিহিত আকারের আকারের সীমাবদ্ধতাগুলি সে সম্পর্কে অবগত ছিল না।

http://caniuse.com/#feat=intrinsic-width

min-height: min-contentফ্লেক্সবক্স অঞ্চলে একটি যুক্ত করা ক্রোমে সমস্যাটি সমাধান করে এবং বিক্রেতার উপসর্গগুলির সাহায্যে অপেরা এবং সাফারিও ঠিক করা যায়, যদিও ফায়ারফক্স অমীমাংসিত থেকে যায়।

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

তবুও ফায়ারফক্স এবং অন্যান্য সম্ভাব্য সমাধানগুলিতে ধারণাগুলি সন্ধান করছি।

Comments

আমি কেবল এটি বলতে চেয়েছিলাম এটি ফায়ারফক্সে ইতিমধ্যে আমার জন্য কাজ করে। সুতরাং ন্যূনতম বিষয়বস্তু সহ সমাধানটি নিখুঁত ছিল।

— পুডেরেয়েম

@ পুডজেরেমে আমি অনুমান করি তারা তখন এটি প্রয়োগ করেছিল। অন্য সমাধানটি আমার পক্ষে কাজ করা margin: autoবন্ধ করে দেয় flex-basisযেখানে এই উত্তরটি উভয় সমস্যার সমাধান করে।

— মার্টিন ডসন

সত্যিই একটি উজ্জ্বল সমাধান। আমি এজ বা আই আই সম্পর্কে কোন চিন্তা করি না, সুতরাং এটি আমার পক্ষে নিখুঁতভাবে কাজ করে!

— ওহগডউই

Answer 3

আমি মাত্র 3 টি পাত্রে এটি টানতে সক্ষম হয়েছি। কৌশলটি হ'ল স্ক্রলিং নিয়ন্ত্রণকারী ধারক থেকে ফ্লেক্সবক্স ধারককে আলাদা করা। সবশেষে, সবকিছুকে কেন্দ্র করে রুট পাত্রে রাখুন। প্রভাব তৈরি করার জন্য এখানে প্রয়োজনীয় স্টাইলগুলি রয়েছে:

সিএসএস:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

এইচটিএমএল:

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

আমি এখানে একটি ডেমো তৈরি করেছি: https://jsfiddle.net/r5jxtgba/14/

Comments

একটি স্ক্রোল-ধারক টিপসের জন্য THX, আমি আমার ***** স্ক্রোল সামগ্রী ঠিক করার জন্য দুদিন ধরে অনুসন্ধান করেছি !!!

— artSx

মনে রাখবেন, আত দিতে flex: 1 1 autoকরার scroll-container। আমি অভ্যাসের সাথে এটি করছিলাম এবং সমস্যার মধ্যে পড়েছিলাম।

— আমিরহসিন

Jsfiddle দেখায় যে আপনি যখন ধারকটির ভিতরে আরও কন্টেন্ট যুক্ত করেন তখন এটি কাজ করে না।

— বিপ্লিটল

Answer 4

আমি মনে করি আমি একটি সমাধান খুঁজে পেয়েছি। এটি প্রচুর পাঠ্য এবং সামান্য পাঠ্যের সাথে কাজ করে । আপনার কোনও কিছুর প্রস্থ নির্দিষ্ট করার দরকার নেই এবং এটি IE8 এ কাজ করা উচিত ।

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Comments

উত্তরাধিকার ব্রাউজারগুলির জন্য এটি সেরা সমাধান। আপনাকে অনেক ধন্যবাদ!

— ড্যানিয়েল

বাহ, এটি অনেকটা মোড়ানো ps

— নাথন আর্থার

বাহ, আমি এটি অর্জনের জন্য কয়েক ঘন্টা ব্যয় করেছি । (আপনি অ্যানিমেশন যুক্ত করার সময় অন্যান্য সমস্ত পদ্ধতি মোবাইল ক্রোমে ব্যর্থ হয় This এটি হয় না) ধন্যবাদ অনেক অনেক ধন্যবাদ!

— মিথ্যা পকেটগুলি

Answer 5

এমডিএন অনুসারে, safeমানটি এখন এমন বৈশিষ্ট্যগুলিতে সরবরাহ করা যেতে পারেalign-items এবং এরjustify-content । এটি নীচে বর্ণিত:

আইটেমটির আকার প্রান্তিককরণ পাত্রে উপচে পড়লে আইটেমটির পরিবর্তে প্রান্তিককরণ মোডের মতো সাজানো হয় start।

সুতরাং, এটি নিম্নলিখিত হিসাবে ব্যবহার করা যেতে পারে।

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

তবে এটি ব্রাউজারের কতটুকু সমর্থন করে তা অস্পষ্ট, এর ব্যবহারের কোনও উদাহরণ আমি খুঁজে পাইনি এবং আমি নিজে এটি নিয়ে কিছু সমস্যা নিয়ে আসছি। এটির দিকে আরও দৃষ্টি আকর্ষণ করার জন্য এটি এখানে উল্লেখ করা।

Comments

জুন 7 2018 এবং এখনও ক্রোমে প্রয়োগ করা হয়নি।

— আমিরহসিন

(বর্তমান) এমডিএন পৃষ্ঠাগুলি অনুসারে, "নিরাপদ" এবং "অনিরাপদ" এখনও ফায়ারফক্স কেবলমাত্র এই সময়ে রয়েছে (ভাল, সাফারি এবং বেশিরভাগ মোবাইল ব্রাউজারগুলির অজানা সমর্থন রয়েছে - আমি এটি নিরাপদ খেলব এবং কোনও সমর্থন অনুমান করব না)।

— জাএমটি

এমডিএন ফায়ারফক্স সমর্থন সমর্থন করে, তবে আমি যখন এটি ফায়ারফক্সে পরীক্ষা করেছি তখন মনে হয় এটি কার্যকর হয় না। jsbin.com/pimoqof/1/edit?html,css, আউটপুট

— অলিভার জোসেফ অ্যাশ

Answer 6

আমি অতিরিক্ত ধারক ব্যবহার করে এটি পরিচালনাও করেছিলাম

এইচটিএমএল

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>  
</div>

সিএসএস

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

in jsfiddle> https://jsfiddle.net/Nash171/cpf4weq5/

পরিবর্তন সামগ্রী প্রস্থ / উচ্চতা মান এবং দেখুন

Answer 7

টেবিল ফ্যালব্যাকের সাথে 2 কনটেইনার ফ্লেক্স পদ্ধতি পরীক্ষা করা IE8-9, ফ্লেক্স IE10,11 এ কাজ করে। সম্পাদনা করুন: যখন ন্যূনতম সামগ্রী, উত্তরাধিকার সমর্থন যোগ করা হয় তখন উল্লম্ব কেন্দ্রীকরণ নিশ্চিত করতে সম্পাদিত।

মাইকেল মাইকের উত্তর হিসাবে ইস্যুটি ভিউপোর্টের আকার থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছে যা বাচ্চাদের উপচে পড়েছে children https://stackoverflow.com/a/33455342/3500688

আরও সাধারণ কিছু এবং পপআপ ধারক (সামগ্রী) এর মধ্যে লেআউটটি বজায় রাখতে ফ্লেক্স ব্যবহার করুন:

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
		<!--[if lt IE 10]>
<style>
	  #popup {
			display: table;
			width:100%;
		}
		.iewrapper {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<![endif]-->

<div id="popup">
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
    <div class="container">
        <p class="p3">Test</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>