ফায়ারফক্স কি অবস্থান সমর্থন করে: টেবিলের উপাদানগুলির সাথে আপেক্ষিক?

Question

আমি ব্যবহার করার চেষ্টা যখন position: relative/ position: absoluteএকটি উপর <th>বা <td>ফায়ারফক্স এটা কাজ বলে মনে হচ্ছে না।

Comments

নাহ, আমি মনে করি কোনও ব্রাউজার এটি সঠিকভাবে সমর্থন করে না। এটি কোনও এইচটিএমএল স্ট্যান্ডার্ড আফাইক

— পেক্কা

@ পেপকা: এইচটিএমএল এর মধ্যে আসে না, এটি সিএসএস। এবং আশ্চর্যজনকভাবে, এটি কাজ করে। :-)

— টিজে ক্রাউডার

আমি যতটা বলতে পারি ওয়েবকিট এবং আইইতে কাজ করে। ফায়ারফক্স কেবলমাত্র টেবিল-সেলগুলিতে পছন্দ করে না বলে মনে হয়। এবং হ্যাঁ, আমি ফ্লোটের উপর নির্ভর না করে <td> এর ভিতরে উপাদানগুলি অবস্থান করার চেষ্টা করছি।

— বেন জনসন

আবার, জাস্টিনের উত্তর দেখুন। এটি ফায়ারফক্সে ঠিক কাজ করে যদি আপনি ফায়ারফক্সকে বলেন যে আপনি এটি কোনও টেবিল উপাদান হিসাবে না বরং একটি ব্লক হিসাবে বিবেচনা করছেন।

— টিজে ক্রাউডার

এই প্রশ্নটিতে সমস্যাটি দেখানো একটি জেএসফিডাল: jsfiddle.net/M5P93 আইই, সাফারি, ক্রোমে কাজ করে; ফায়ারফক্স ব্যর্থ।

— ক্রিস মোসচিনি 21

Answer 1

সহজ এবং সর্বাধিক উপযুক্ত উপায় হ'ল কোষের বিষয়বস্তুগুলিকে একটি ডিভিতে গুটিয়ে রাখা এবং অবস্থান যুক্ত করা: সেই ডিভের সাথে আপেক্ষিক।

উদাহরণ:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

Comments

+1 এটিই আমার জন্য কার্যকর সমাধান solution ব্যবহার tr {display:block}সম্পূর্ণরূপে বিন্যাস ধ্বংসাবশেষ।

— ওয়েসলি মার্চ

+1 এটি আমার জন্যও উত্তর। display: blockজটিল টেবিল বিন্যাসগুলি স্থির করার পক্ষে যথেষ্ট নয়। অতিরিক্ত ডিভ হ'ল সমাধান যা আরও নির্ভরযোগ্য।

— ডিএ

তবে, এই সমাধানটির সাথে "প্রস্থ" এবং "উচ্চতা" এখনও ব্যবহার করা যায় না

— 4esn0k

@ 4esn0k আপনি কি এমন কোনও সমাধান খুঁজে পেয়েছেন যেখানে আপনি প্রস্থ এবং উচ্চতা ব্যবহার করতে পারেন?

— নিল

দুর্ভাগ্যক্রমে, আপনি যদি অন্য কলামের চেয়ে আরও কন্টেন্ট যুক্ত অন্য কলাম যুক্ত করেন তবে আপনার সমাধান কাজ করে না । সুতরাং আমি "গৃহীত উত্তর" পতাকা এবং ভোটগুলি দিয়ে যে পরিমাণ প্রশংসা করেছি তা বুঝতে পারি না। দয়া করে jsfiddle.net/ukR3q

— জানুয়ারী

Answer 2

যে কোন সমস্যা হওয়া উচিত। এছাড়াও সেট করতে মনে রাখবেন:

display: block;

Comments

সেটিং ডিসপ্লেটির ডাউনসাইড: ব্লকটি মনে হচ্ছে এটি টেবিল ফর্ম্যাটিংয়ের সাথে সত্যিই গণ্ডগোল করতে পারে যদি এটি উপাদানটিতে সরাসরি প্রয়োগ করা হয়। কারণ এটি টেবিল-সেল থেকে এটি পরিবর্তন করছে ... না আমি পাগল?

— বেন জনসন

@ বেন: আচ্ছা, হ্যাঁ positionসংজ্ঞা অনুসারে একটি টেবিল কক্ষে সেট করা হ'ল গুরুত্ব সহকারে সারণী বিন্যাস পরিবর্তন করা। আপনি ঘরটির ব্লকটি প্রবাহের বাইরে নিয়ে যান (ব্যতীত position: relativeযেখানে এটি প্রবাহে থাকে তবে এটি থেকে অফসেট থাকে)।

— টিজে ক্রাউডার

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

— জাস্টিন নিসনার

@ টিজে এটি অবস্থান যোগ করছে না: তুলনামূলকভাবে যে দৃশ্যটির চেহারা পরিবর্তন করছে, এটি টেবিল-সেল থেকে ব্লক-এ পরিবর্তন করবে। আবার, এটি কাজ করে জেনে ভালো লাগল, তবে প্রচুর ক্ষেত্রে ব্লক স্তরের উপাদান তৈরি করা টেবিল বিন্যাসে সত্যই গন্ডগোল করবে। ধন্যবাদ জাস্টিন!

— বেন জনসন

হায়রে, display: blockফায়ারফক্সেও সমস্যা সৃষ্টি করতে পারে - যেমন টেবিল সেলটি কলামগুলি বিস্তৃত করে থাকে তবে এটি ব্লক করে সেট করে সেলটি প্রথম কলামে ভেঙ্গে যাবে।

— ডিএ

Answer 3

যেহেতু ইন্টারনেট এক্সপ্লোরার 7, 8 এবং 9 সহ প্রতিটি ওয়েব ব্রাউজার সঠিকভাবে অবস্থান পরিচালনা করে: একটি টেবিল-প্রদর্শনের উপাদান সম্পর্কিত এবং কেবল ফায়ারফক্স এটিকে ভুলভাবে পরিচালনা করে, আপনার জাভাস্ক্রিপ্ট শিম ব্যবহার করা আপনার সেরা বেট। আপনাকে কেবল একটি ত্রুটিযুক্ত ব্রাউজারের জন্য আপনার ডোমটিকে পুনরায় সাজানো উচিত নয়। যখন আইআই কিছু ভুল হয়ে যায় এবং অন্য সমস্ত ব্রাউজারগুলি এটি ঠিক হয়ে যায় তখন লোকেরা সমস্ত সময় জাভাস্ক্রিপ্ট শিমস ব্যবহার করে।

সমস্ত এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যাখ্যা সহ এখানে সম্পূর্ণরূপে টিকাশযুক্ত jsfiddle রয়েছে।

http://jsfiddle.net/mrbinky3000/MfWuV/33/

আমার উপরের jsfiddle উদাহরণটি "প্রতিক্রিয়াশীল ওয়েব ডিজাইন" কৌশলগুলি কেবল এটি দেখানোর জন্য ব্যবহার করে যে এটি একটি প্রতিক্রিয়াশীল বিন্যাসের সাথে কাজ করবে। তবে আপনার কোডটি প্রতিক্রিয়াশীল হতে হবে না।

এখানে নীচে জাভাস্ক্রিপ্ট রয়েছে, তবে এটি প্রসঙ্গের বাইরে এতটা বোঝায় না। উপরের jsfiddle লিঙ্কটি দেখুন।

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

Comments

— b ব্রাউজারটি

হাঁ। সুতরাং আপনার প্রিয় ব্রাউজার সনাক্তকরণ পদ্ধতির বিকল্প করুন।

— mrbinky3000

ব্রাউজারটি ত্রুটিযুক্ত নয়। স্পেসিফিকেশন বলছে যে প্রভাবটি অপরিবর্তিত।

— ডাব্লুজিএইচ

@WGH সমাধানটি কম কম করে না। ডাউনভোটের জন্য ধন্যবাদ

— mrbinky3000

আরে আমি আপনার প্রতিশ্রুতি থেকে একটি পলফিল তৈরি করেছি, এটি দেখুন! :) github.com/Grawl/gecko-table-position-polyfill

— Пронин

Answer 4

ফায়ারফক্স 30 দিয়ে শুরু করে আপনি positionটেবিলের উপাদানগুলিতে ব্যবহার করতে সক্ষম হবেন । আপনি বর্তমান রাতের বিল্ডটি দিয়ে নিজের জন্য চেষ্টা করতে পারেন (একক হিসাবে কাজ করে): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

পরীক্ষার কেস ( http://jsfiddle.net/acbabis/hpWZk/ ):

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

আপনি এখানে পরিবর্তনগুলির বিকাশকারীদের আলোচনা অনুসরণ করতে পারেন (বিষয়টি 13 বছরের পুরানো): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

সাম্প্রতিক প্রকাশের ইতিহাস বিচার করে , 2014 সালের মে মাসের সাথে সাথেই এটি উপলভ্য হতে পারে I

সম্পাদনা (6/10/14): ফায়ারফক্স 30 আজ মুক্তি পেয়েছে । শীঘ্রই, বড় ডেস্কটপ ব্রাউজারগুলিতে টেবিলের অবস্থান কোনও সমস্যা হবে না

Answer 5

ফায়ারফক্স ৩.6.১৩ অনুসারে, অবস্থান: আপেক্ষিক / পরম টেবিলের উপাদানগুলিতে কাজ করে না বলে মনে হয়। এটি ফায়ারফক্সের দীর্ঘস্থায়ী আচরণ বলে মনে হচ্ছে। নিম্নলিখিতটি দেখুন: http://csscreator.com/node/31771

সিএসএস ক্রিয়েটার লিঙ্কটি নিম্নলিখিত ডাব্লু 3 সি রেফারেন্স পোস্ট করেছে:

সারণী-সারি-গোষ্ঠী, টেবিল-শিরোলেখ-গোষ্ঠী, টেবিল-পাদচরণ-গোষ্ঠী, টেবিল-সারি, টেবিল-কলাম-গোষ্ঠী, টেবিল-কলাম, টেবিল-ঘর এবং টেবিল-ক্যাপশন উপাদানগুলিতে 'অবস্থান: আপেক্ষিক' এর প্রভাব অনির্ধারিত. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Comments

জাস্টিনের উত্তর দেখুন। এটি কাজ করে, তবে আপনি displayসেটিংস পরিবর্তন করেন provided যা বোধগম্য হয় (ডিগ্রি সিএসএস বোধ করে)।

— টিজে ক্রাউডার

হ্যাঁ, এটি "কাজ করে" ব্যতীত এটি কোষগুলিতে প্রয়োগ করা আপনার টেবিলটিকে পুরোপুরি নষ্ট করে দেয় ... কিন্ডা সেই পরিস্থিতিতে অর্থহীন।

— সাইমন পূর্ব

Answer 6

display:inline-blockটেবিলের বিন্যাসটি বিনষ্ট না করে ফায়ারফক্স ১১-এ আমার জন্য কাজ করার চেষ্টা করুন আমাকে টিডি / তম মধ্যে অবস্থানের দক্ষতা প্রদান করে। position:relativeএটি একটি td / th এর সাথে একযোগে জিনিসগুলিকে কাজ করা উচিত। সবেমাত্র এটি নিজেই কাজ করলাম।

Answer 7

আমার একটি table-cellউপাদান ছিল (যা আসলে ছিল DIVনা একটি TD)

আমি প্রতিস্থাপন

display: table-cell;
position: relative;
left: .5em

(যা ক্রোমে কাজ করেছিল) সাথে

display: table-cell;
padding-left: .5em

অবশ্যই প্যাডিং সাধারণত বাক্সের মডেলটিতে প্রস্থে যুক্ত করা হয় - তবে পরম প্রস্থের ক্ষেত্রে টেবিলগুলি সর্বদা নিজের মনে মনে থাকে - তাই এটি কিছু ক্ষেত্রে কাজ করবে।

Answer 8

ডিসপ্লে যোগ করা হচ্ছে: ফায়ারফক্সে প্যারেন্ট উপাদানগুলিতে ব্লক পেয়েছে আমাকে শীর্ষগুলিও যুক্ত করতে হয়েছিল: 0 পিএক্স; বাম: 0px; কাজ করার জন্য Chrome এর মূল উপাদানকে parent আই 7, আই 8, এবং আই 99 পাশাপাশি কাজ করছে।

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

Answer 9

গ্রহণযোগ্য সমাধান ধরণের কাজ করে তবে আপনি যদি অন্য কলামটির চেয়ে আরও কন্টেন্ট যুক্ত না করে অন্য কলামটি যোগ করেন তবে তা নয়। যদি আপনি height:100%আপনার টিআর , টিডি ও ডিভ যোগ করেন তবে এটি কাজ করা উচিত।

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

একমাত্র সমস্যা হ'ল এটি কেবল ক্রোম এবং আইই-তে নয়, এফএফ-এ কলামের উচ্চতার সমস্যা সমাধান করে। সুতরাং এটি এক ধাপ কাছাকাছি, তবে নিখুঁত নয়।

আমি জানুয়ার থেকে একটি ফিডল আপডেট করেছি যা এটি দেখানোর জন্য গৃহীত উত্তরের সাথে কাজ করছে না। http://jsfiddle.net/gvcLoz20/