2008-11-05 6 views
8

मेरे पास एक बहुत ही विशिष्ट HTML तालिका निर्माण है जो एक गीको बग प्रकट करता है।गीको-आधारित ब्राउज़र में सीएसएस तालिका सेल सीमाओं को गायब कर रहे हैं

यहां समस्या का एक आसुत संस्करण है। एक छिपकली आधारित ब्राउज़र में निम्न तालिका का निरीक्षण करें (एफएफ, उदाहरण के लिए): (आप कॉपी करके एक नई फ़ाइल में चिपका करना होगा)

<style> 
table.example{ 
    border-collapse:collapse; 
} 
table.example td { 
    border:1px solid red; 
} 
</style> 
<table class="example"> 
    <thead> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th>   
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td rowspan="3">3</td> 

     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td rowspan="2">2</td>  
     </tr> 
     <tr> 
      <td>1</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

वहाँ एक लाइन "3" से अधिक लापता में है निचले दाएं सेल - इसे किसी भी अन्य ब्राउज़र में देखें और लाइन अपेक्षित के रूप में दिखाई देगी। दिलचस्प बात यह है कि तालिका के थैड सेक्शन को देखें और देखें कि हमें क्या मिलता है:

<style> 
table.example{ 
    border-collapse:collapse; 
} 
table.example td { 
    border:1px solid red; 
} 
</style> 
<table class="example"> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td rowspan="3">3</td> 

     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td rowspan="2">2</td>  
     </tr> 
     <tr> 
      <td>1</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

ऐसा करने से यह काम करता है। क्या किसी ने इसे देखा है? मुझे लगता है कि अब मैं अपने थैड सेक्शन को एक वर्कअराउंड के रूप में छुटकारा पाउंगा हालांकि यह तालिका को कम सुलभ बनाता है।

+0

, पहला उदाहरण: http://jsfiddle.net/eahb2t90/2/ –

उत्तर

5

अजीब ... निश्चित रूप से एक चित्रकारी बग। यदि आप संदर्भ मेनू को भाग पर प्रदर्शित होने के लिए राइट-क्लिक करने के लिए राइट-क्लिक करें, तो जब आप संदर्भ मेनू को खारिज करते हैं, तो रेखा को नीचे रेखांकित किया गया है।

संपादित करें: वर्कअराउंड - अगर आप पर style="border-color: ...;" डाल <td rowspan="3"> आप सीमा प्रकट करने के लिए प्राप्त कर सकते हैं, लेकिन यह एक अलग रंग हो गया है - बस एक है कि संभव के रूप में दूसरों के रूप में करीब है का उपयोग करें। उदाहरण के लिए, यदि तालिका # ff0000 का उपयोग # ff0001

+0

पुष्टि और अच्छे कामकाज के लिए धन्यवाद। – Aaron

0

मुझे यह बग भी मिला है लेकिन यह मेरे पीसी पर नहीं बल्कि दूसरा है। यदि मैं एक निश्चित संकल्प के बाद ब्राउज़र विंडो का आकार बदलता हूं तो रेखाएं गायब हो जाएंगी। एक बार जब मैं खिड़की को अधिकतम करता हूं तो सभी पॉप वापस आते हैं। आप सीमा-पतन को सेट करके इसे स्थायी रूप से ठीक कर सकते हैं: अलग; यह प्रत्येक सेल के प्रत्येक बोरडर को अपनी चौड़ाई देता है। यह वह नहीं है जो मैं करना चाहता हूं लेकिन यह काम करता है।

यह सीमा-पतन का उपयोग करके भी हो सकता है: पतन; फिर संरेखण सीमाओं को 1px और फिर 0px पर सेट करना। क्योंकि यह सीमाओं को ध्वस्त करता है क्योंकि यह 1px चौड़ाई से 0px को प्राथमिकता देता है।

किसी भी तरह से यह केवल फ़ायरफ़ॉक्स है और यह इससे दूर जाने का एक और कारण है। सुविधा के लिए

संबंधित मुद्दे