আইই 7 ডিসপ্লে বুঝতে পারে না: ইনলাইন-ব্লক

127

কেউ কি আমাকে এই বাগের চারপাশে মাথা পেতে সহায়তা করতে পারেন? ফায়ারফক্সের সাথে এটির কাজ ঠিক আছে তবে ইন্টারনেট এক্সপ্লোরার with এর সাথে এটি কার্যকর নয়। এটা বুঝতে না পারছে display: inline-block;।

এইচটিএমএল:

<div class="frame-header">
    <h2>...</h2>
</div>

CSS:

.frame-header {
    height:25px;
    display:inline-block;   
}

html internet-explorer-7 css

— lanthuong
সূত্র

1

আপনি ঠিক কি অর্জন করতে চান? কি প্রভাব?

— ইলাদার্সদা

302

আই 7 display: inline-block;হ্যাকটি নিম্নরূপ:

display: inline-block;
*display: inline;
zoom: 1;

ডিফল্টরূপে, আই 7 কেবলমাত্র inline-blockপ্রাকৃতিক inlineউপাদানগুলিতে সমর্থন করে ( কিরকস্মোড সামঞ্জস্যতা সারণী ), সুতরাং আপনার অন্যান্য উপাদানগুলির জন্য কেবল এই হ্যাকের প্রয়োজন।

zoom: 1ট্রিগার নেই hasLayoutআচরণ, এবং আমরা ব্যবহার তারকা সম্পত্তি হ্যাক সেট করার জন্য displayকরতে inlineIE7 এবং নিম্ন একমাত্র (নতুন ব্রাউজারে প্রযোজ্য হবে না)। hasLayoutএবং inlineএকসাথে মূলত inline-blockআই 7 এর আচরণকে ট্রিগার করবে , তাই আমরা খুশি।

এই সিএসএসটি বৈধতা দেবে না, এবং আপনার স্টাইলশিটটি যেভাবেই হোক নাড়াচাড়া করতে পারে, তাই শর্তাধীন মন্তব্যগুলির মাধ্যমে আইআই 7 কেবলমাত্র স্টাইলশিট ব্যবহার করা ভাল ধারণা হতে পারে।

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

— কাপা
সূত্র

40

আমি *zoom:1;লেআউটটি ট্রিগার করতে পছন্দ করি । সুতরাং এটি আরও স্পষ্টভাবে যে *zoomএবং এক সাথে *displayযান

— ইউনজেন

4

@ রোশনউইজেসেনা ডাব্লু 3 স্কুলগুলির ডাব্লু 3 সি এর সাথে কোনও সম্পর্ক নেই এবং আইটি 7-তেও কর্তৃপক্ষ নেই

— মুসা

1

@ রোশনউইজেসেনা ডাব্লু 3 স্কুলগুলি একটি ভাল সংস্থান নয় এবং এটি মোটেও সরকারী নয়। এটির উপর নির্ভর করবেন না। তারা যে বিষয়টি উল্লেখ করে বা উল্লেখ করে না তার সত্যিকার অর্থে কোনও অর্থ নেই।

— কাপা

1

ধন্যবাদ বন্ধুরা! তাই কি ভেবে অবাক হয়ে অফিসিয়াল ডকুমেন্টেশন হিসাবে আমার ব্যবহার করা উচিত!

— রওশন উইজেসিনা

2

@ রোশনউইজেসেনা আপনি ডাব্লু 3 সি এর অফিশিয়াল পৃষ্ঠা ডব্লু 3.org এ অফিক্যাল স্ট্যান্ডার্ড স্পেসিফিকেশনগুলি পেতে পারেন । ডেভেলপার.মোজিলা.অর্গ একটি দুর্দান্ত সংস্থান যা আপনি রেফারেন্স হিসাবে ডাব্লু 3 স্কুলগুলির পরিবর্তে ব্যবহার করতে পারেন।

— কাপা

8

হালনাগাদ

যেহেতু কেউই আই 6 এবং 7 ব্যবহার করে না আমি আলাদা সমাধান উপস্থাপন করব: আপনার আর হ্যাকের দরকার নেই, কারণ আই 8 এটি নিজেই সমর্থন করে

যারা IE8 পূর্ববর্তীদের পাথর বয়স ব্রাউজার (এটা যে IE8 যে পুরানো, খুব না সমর্থন করতে হবে জন্য কাশি ):
আই ই সংস্করণ নিয়ন্ত্রণের অ্যাকাউন্টের জন্য কিছু শর্তসাপেক্ষ ক্লাস ব্যবহার <html>ট্যাগ মত পল আইরিশ মধ্যে যুক্তরাষ্ট্রের তার প্রবন্ধে

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

এর মাধ্যমে আপনার বিভিন্ন আই ব্রাউজারগুলির জন্য এইচটিএমএল-ট্যাগে বিভিন্ন ক্লাস থাকবে

আপনার প্রয়োজনীয় সিএসএস নীচে রয়েছে

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

এটি বৈধ হবে এবং আপনার কোনও অতিরিক্ত সিএসএস ফাইলের প্রয়োজন হবে না

পুরানো উত্তর

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}

— yunzen
সূত্র

আপনি উপরে প্রদর্শিত সিএসএস অর্থবোধ করে তবে কীভাবে এটি এইচটিএমএলটিতে কাজ করবে? ধন্যবাদ।

— স্টিফেনএসসি

@ স্টেফেনইএসসি দুটি উপায়। বর্গ যোগ inline-blockকরার frame-headerউপাদান। অথবা সিএসএস নির্বাচকদের inline-blockমাধ্যমে পরিবর্তন করুন frame-header।

— ইউনজেন

1

আই 77 'ইনলাইন-ব্লক' সঠিকভাবে সমর্থন করে না, এখানে আরও তথ্য: LINK এর
পরিবর্তে 'ইনলাইন' ব্যবহার করতে পারেন can

ঠিক কি আপনি অর্জন করার চেষ্টা করছেন? আমাদের একটি উদাহরণ তৈরি করুন এবং এখানে রাখুন: http://jsfiddle.net/

— Iladarsda
সূত্র

0

ইনলাইন ব্যবহার করুন, এটি তালিকা আইটেমগুলির জন্য এই ধরণের নির্বাচকদের সাথে কাজ করে:

ul li {}

বা নির্দিষ্ট হতে হবে:

ul[className or name of ID] li[className or name of ID] {}

— MiddleKay
সূত্র

2

inlineহিসাবে একই হয় না inline-block। উদাহরণস্বরূপ, height: 25px;উদাহরণটিতে থাকা উপাদানটি কার্যকর হলে কার্যকর হবে না inline। এছাড়াও, প্রশ্ন তালিকাগুলি সম্পর্কে কিছুই বলে না।

— কাপা