tr पृष्ठभूमि के साथ Google क्रोम बग

Question

मैं एक तालिका पंक्ति में पृष्ठभूमि-छवि सेट करने की कोशिश कर रहा हूं, लेकिन पृष्ठभूमि अपने सभी टीडी बच्चों पर लागू होती है।

IE7 में एक ही बग है, लेकिन यह

tr { 
    position: relative; 
} 

इसके बारे में किसी भी संकेत के साथ हल किया जाता है?

धन्यवाद

Answer 1

यह एकमात्र समाधान है जिसे मैं जावास्क्रिप्ट का उपयोग किए बिना जानता हूं। टीआर और टीडी की ऊंचाई निर्दिष्ट करने में आपकी कमी है, क्योंकि टीआर पूर्ण रूप से स्थित है। मुझे यह भी यकीन नहीं है कि यह अन्य ब्राउज़रों में कैसे व्यवहार करेगा।

<style> 
    tr { 
     position: absolute; 
     background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat; 
     height: 200px; 
     border: 1px solid #00f; 
    } 
    td { 
     width: 200px; 
     height: 200px; 
     border: 1px solid #f00; 
    } 
</style> 

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 2

यह सभी ब्राउज़रों में मेरे लिए काम करता है:

tr { 
background: transparent url(/shadow-down.gif) no-repeat 0% 100%; 
display: block; 
position: relative; 
width: 828px; 
} 

tr td{ 
background: transparent; 
} 

Answer 3

क्रोम (वेबकिट) को ओवरराइड करता है स्थिति: तालिका पंक्तियों का रिश्तेदार और स्थिर करने के लिए शैली गणना करता है। बग या फीचर - यह स्थिति को रोकता है: सापेक्ष फिक्स आईई 7 में उपयोग किया जाता है।

समाधान जब निश्चित (जाना जाता है) सेल आकार का उपयोग करते हुए: टीआर { नाव: छोड़ दिया; }

और तालिका में सभी कोशिकाओं को उचित सेल आकार जोड़ (वर्ग या इनलाइन शैलियों के माध्यम से या तो)। मैंने पंक्ति के आकार भी जोड़े थे, हालांकि समाधान के समाधान के लिए इसकी आवश्यकता नहीं हो सकती थी।

मुझे गतिशील सेल आकारों के समाधान के लिए कोई आवश्यकता नहीं है, इसलिए मैं उस उपयोगकेस की खोज नहीं कर रहा हूं।

Answer 4

मैं सीधे टेबल कोशिकाओं के लिए पृष्ठभूमि छवि स्थापित करने के लिए, बाईं ओर बाद के सभी कक्षों की पृष्ठभूमि स्थिति स्थानांतरण इतना है कि यह एकदम सही ढंग से लग रहा है की सलाह देते हैं। इस तरह आपको अपनी पृष्ठभूमि-छवि को टुकड़ा करने की ज़रूरत नहीं है।

Answer 5

ट्र स्टाइल टैग में Style='Display:inline-table;' यह सभी ब्राउज़र में ठीक काम करता है।

Answer 6

क्या मैं कर रहा समाप्त हो गया था:

table.money-list tr { 
background: url(images/status-2.gif) no-repeat; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 

    /*Chrome CSS here*/ 
    table tbody tr td:first-child { 
    background-image: none; 
    background-color: transparent; 
} 

table tr td{ 
    background-color: #FFFFFF; 
} 
} 

तो जैसा कि आप देख सकते हैं, बस हर टीडी लेकिन पहले एक है, और लक्ष्य वेबकिट के लिए एक पृष्ठभूमि रंग निर्धारित किया है।

Answer 7

यहां मेरा jQuery समाधान है। यह एक थैड टी के लिए है लेकिन टोब टी के लिए भी काम करना चाहिए।

$(document).ready(function() { 
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit) 
    if ($.browser.webkit) { 
     $('thead tr').each(function (i) { 
      var theadWidth = $(this).width()-1; 
      $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>'); 
     }); 
    } 
}); 

आप इसे क्रोम/फ़ायरफ़ॉक्स/आईई 9 में देख सकते हैं। यह वही दिखना चाहिए।

Answer 8

मेरे द्वारा वर्णित कामकाज में से कोई भी मेरे लिए सही काम नहीं करता है। यहाँ है कि मैं क्या साथ समाप्त हो गया है:

TABLE TBODY.highlight { 
    background-image: url(path/image.png); 
} 

TABLE>* { 
    float: left; 
    clear: both; 
} 

क्रोम और फ़ायरफ़ॉक्स में केवल परीक्षण किया तो पता नहीं कैसे यह आईई (मेरे मामले में महत्वपूर्ण नहीं) में काम करता है, लेकिन मेरे लिए यह दोषरहित काम करता है!