फ़ायरफ़ॉक्स को बॉर्डर-टेबल पर बॉर्डर-पतन के साथ नहीं दिखाया गया है: स्थिति: tbody पर रिश्तेदार, या सेल पर पृष्ठभूमि-रंग

Question 1

निम्नलिखित HTML पर विचार करें:

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

स्निपेट का विस्तार करें

ध्यान दें कि अंतिम सेल में अपनी इनलाइन शैली में एक बाईं और एक दाईं सीमा होती है। आप (या कम से कम I) यह अपेक्षा करेंगे कि यह दिखाई दे। IE में, यह मामला है। लेकिन फ़ायरफ़ॉक्स (6) में, यह नहीं है। आप इसे इसके द्वारा हल कर सकते हैं:

div.datagrid table tbodyCSS में सापेक्ष स्थिति को हटाना
बदलने div.datagrid table tbodyके लिए div.datagrid tableसीएसएस में
सीएसएस में background-colorपर हटानाtable.data td.priceCell
सीएसएस में border-collapseपर हटानाdiv.datagrid table

यह हमारे कोड का एक सरलीकृत संस्करण है; हमने इसे हल भी किया (विकल्प 2 को चुनकर)। लेकिन मैं जो सोच रहा हूं वह है:

क्या यह फ़ायरफ़ॉक्स में एक बग है?
यह IE में एक बग है?

और विशेष रूप से: क्या कारण है कि जब सीएसएस जैसा है तो फ़ायरफ़ॉक्स सीमाओं को नहीं दिखाएगा?

Question 2

यह मेरे लिए फ़ायरफ़ॉक्स बग जैसा दिखता है। पृष्ठभूमि सीमाओं पर पेंटिंग कर रहे हैं; यदि आप एक पारभासी पृष्ठभूमि रंग का उपयोग करते हैं तो आप इसे देख सकते हैं।

मैंने https://bugzilla.mozilla.org/show_bug.cgi?id=688556 दायर किया

Question 3

बस इस मुद्दे में भाग गया और एक सीएसएस केवल समाधान के लिए आया: बस background-clip: padding-boxअपने tdतत्व में जोड़ें ।

अधिक जानकारी के लिए यह लेख देखें: https://developer.mozilla.org/en-US/docs/CSS/background/clip

Question 4

बस सभी को एक जगह पर रखना है।

समस्या तब उत्पन्न होती है, जब आपके पास किसी तालिका के अंदर की स्थिति के साथ एक सेल होता है, जिसमें टूटी हुई सीमाएँ होती हैं (जैसा कि बोरिस ने संकेत दिया और बग में भरा है https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

यह CSS23 का उपयोग करके आसानी से हल किया जा सकता है जैसा कि user2342963 द्वारा इंगित किया गया है (बैकग्राउंड-क्लिप जोड़कर: सेल में पैडिंग-बॉक्स)।

आप समस्या (फ़ायरफ़ॉक्स के साथ) और यहाँ ठीक देख सकते हैं: http://jsfiddle.net/ramiro_conductiva/Xge.gov

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>

Question 5

यह फ़ायरफ़ॉक्स में एक बग है और उम्मीद है कि वे इसे जल्द ही ठीक कर देंगे। लेकिन इस बीच मैं अपनी tdकोशिकाओं को सेट करके मेरे लिए इस मुद्दे को ठीक करने में सक्षम था position: static। उम्मीद है कि किसी और की मदद करेगा।

td {
    position: static;
}

Question 6

एक अन्य संभावित समाधान आपके टेबल मार्कअप में कोल्सन त्रुटियों को ठीक करना है।

स्पष्ट रूप से सीमा-पतन का उपयोग करते समय छिपी सीमाओं के साथ कोल्प्सन त्रुटियों का एक ही प्रभाव हो सकता है: पतन;

मुझे http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html के माध्यम से सही समाधान के लिए निर्देशित किया गया था ।

अपनी तालिका में मैंने <th colspan = "9"> लिखा था जब केवल 8 कॉलम थे।

जिसके कारण त्रुटि (छिपी दाईं सीमा) में हुई

क्रोम 51.0.2704.103 मीटर (64-बिट)
विवाल्डी 1.2.490.43 () (32-बिट)

लेकिन सही सीमाओं के साथ प्रदान किया गया

फ़ायरफ़ॉक्स 44.0.2
IE 11 (11.420.10586.0)
बढ़त 25.10586.0.0

Question 7

इस मुद्दे को हल करने का सबसे अच्छा तरीका कुछ ऐसा करना है।

स्थिति पर ध्यान दें: "थ्रेड" और "tbody" तत्वों में रिश्तेदार संपत्ति, जो महत्वपूर्ण हैं। इसलिए सीमा-पतन और पृष्ठभूमि-क्लिप गुण हैं। सभी पृष्ठभूमि और वैकल्पिक पंक्तियों पर पृष्ठभूमि-रंग के साथ काम करता है।

table {
  width: 100% !important;
  border-spacing: 0;
  border-collapse: unset !important;

  thead {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      th {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }

  tbody {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      &:last-child {
        td {
          border-bottom: 1px solid #737373!important;
        }
      }

      td {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }
}

Question 8

इस (पुराने) मुद्दे के लिए एक और समाधान जोड़ना: यह मेरे लिए आज हुआ है, क्योंकि मेरे पास एक बहुत जटिल तालिका है जिसमें कई लोग हैं। एकमात्र मुद्दा वास्तव में यह था कि मेरे पास एक खोला हुआ टीओबी टैग था जो बंद नहीं था। मैंने अपने सीएसएस में कुछ भी बदलने की आवश्यकता के बिना उस टैग और सीमाओं को फिर से दिखाई दिया। स्पष्ट करने के लिए, मेरी संरचना कुछ इस प्रकार थी:

<table>
  <thead>
    <tr><th>Col1</th><th>Col2</th></tr>
  </thead>
  <tbody>
  <tbody>
    <tr><td>Val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
  </tbody>
</table>

स्निपेट का विस्तार करें