IE7 तालिका सीएसएस द्वारा अदृश्य बनाया कोशिकाओं बाद में वर्ग परिवर्तन (??) को दिखाई नहीं बनाया जा सकता है

यहां दो परीक्षण फ़ाइलें हैं:IE7 तालिका सीएसएस द्वारा अदृश्य बनाया कोशिकाओं बाद में वर्ग परिवर्तन (??) को दिखाई नहीं बनाया जा सकता है

http://gutfullofbeer.net/good-table.html

http://gutfullofbeer.net/bad-table.html

उन पर मार्कअप दो पेज लगभग सभी समान हैं। दो कॉलम वाली एक टेबल है। <th> और <td> एक कॉलम के तत्व (दूसरे एक) को कक्षा "जंक" दिया जाता है।

"अच्छा" पृष्ठ में, जब आप इसे लोड करते हैं तो आपको शीर्ष पर अनचेक चेकबॉक्स दिखाई देगा। यदि आप चेकबॉक्स चेक करते हैं, तो दूसरा कॉलम गायब हो जाना चाहिए। यदि आप इसे अनचेक करते हैं, तो दूसरा कॉलम वापस आता है। "खराब" पृष्ठ में, चेकबॉक्स चेक आउट शुरू होता है। इसे अनचेक करने से आईई 7 में कोई प्रभाव नहीं पड़ता है, हालांकि यह अन्य ब्राउज़रों में काम करता है जो मौलिक बुराई से नहीं हैं।

चेकबॉक्स को थोड़ी जावास्क्रिप्ट दिनचर्या में लगाया गया है जो <table> टैग से कक्षा "कॉम्पैक्ट" को जोड़ता या हटा देता है।

table.compact th.junk, table.compact td.junk { 
    display: none; 
}

इस प्रकार "अच्छा" पृष्ठ पर क्या होता है क्या होना चाहिए है: वहाँ एक स्टाइलशीट कि यह भी शामिल है है। हालांकि, ऐसा लगता है कि आईई 7 (शायद 6 भी) में यदि तालिका तत्व शुरू करते हैं, तो प्रारंभ में प्रस्तुत किया गया था कि वे अदृश्य होने के लिए स्टाइल किए गए हैं, वे कभी भी नहीं देख पाएंगे, चाहे डीओएम में आने वाले बदलावों के बावजूद नए स्टाइल नियमों को प्रभाव में लाएं और उन्हें दृश्यमान छोड़ दें। (यह विशेष रूप से <table> भागों के साथ एक मुद्दा हो प्रकट होता है; मैं एक ही तंत्र कहीं और उपयोग कर रहा हूँ अन्य तत्वों और वे सब काम ठीक से।)

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

मैंने चारों ओर गुगल किया है और कुछ भी नहीं मिला है, जो आश्चर्यचकित नहीं होना चाहिए यदि आप मानते हैं कि आप कितने हिट करते हैं "आईई 7 लेआउट बग" खोज से प्राप्त करें।

स्रोत

2010-06-19 Pointy

शायद आप टेबल लेआउट बदल सकते हैं, एक डोम/सीएसएस जाने रीफ्रेश होता है, और इसे वापस सेट करें ... –

@pst यह मेरा वर्तमान सबसे अच्छा विचार है - मेरे पास AJAX- लोड की गई सामग्री में एक आई 7-केवल स्क्रिप्ट टैग शामिल हो सकता है जो नियंत्रण सेट करता है जैसे सब कुछ दिखाई दे रहा है, और यह भी एक समय समाप्ति ताकि 1/4 दूसरा बाद में यह क्या यह वास्तव में होना चाहिए था पर रीसेट हो जाता है (प्लस मैं अपने जावास्क्रिप्ट सामान को गति प्रदान) की शुरूआत। बदसूरत लेकिन यह काम करता है। मैं इस बारे में उत्सुक हूं कि कुछ अजीब सीएसएस हैक इसे थोड़ा कम पागल बनाने के लिए है या नहीं। हालांकि धन्यवाद! – Pointy

मैं IE 7 स्थापित नहीं है, लेकिन यह आईई 6 के साथ एक ही मुद्दा था यहाँ क्या मैं इसे ठीक करने के लिए किया था है:

$(function() { 
    $('#click').click(function() { 
    $(".compact th+th,.compact td+td").toggleClass('junk',this.checked); 
    }); 
});

समस्या आप चयनकर्ता के साथ किया गया था। compact पर टॉगलिंग junk पर दृश्यता नहीं जोड़ पाएगी।

स्रोत

2010-06-19 21:44:29

मुझे नहीं लगता कि यह सच है। पेज कि * * काम करता है में, सीएसएस बिल्कुल वैसा ही है, और आप दिखाई से अदृश्य करने के लिए टॉगल कर सकते हैं और फिर से वापस सब आप की तरह। यह मजेदार है। हालांकि, जब चीजें शुरू होती हैं तो सामग्री * छुपा * है, तो चीजें काम नहीं करती हैं। – Pointy

ठीक है, जाहिर है IE 6 और IE 7 कुछ मुद्दे हैं। वैसे भी, ऊपर मेरा कोड आईई 6 और एफएफ में काम करता है। –

हां, मुझे यकीन है कि आप सही हैं @ गर्ट जी – Pointy

यह एक प्रतिपादन बग है। आईई 6/7 उचित टेबल डिस्प्ले मॉडल का उपयोग नहीं करता है। दुर्भाग्य से मैं इस विशेष बग के लिए एक विशिष्ट नाम/लेबल को याद नहीं कर सकता हूं और मुझे इसकी पुष्टि करने वाले आधिकारिक संसाधन नहीं मिल रहे हैं।

कम से कम, मुझे इसे ठीक करने के लिए 2 सीएसएस तरीके मिले।

सबसे आसान, display: none; के बजाय visibility: hidden; का उपयोग करें।दुर्भाग्य से यह अच्छी तरह से काम नहीं करता है अगर आप अधिक कॉलम के बाद होने वाली चालू किए जाने स्तंभ या एक मेज सीमा होती है। यह अभी भी एक जगह छोड़ देता है। एफएफ में इस मुद्दे position: absolute;.junk को ठीक करता है जोड़ा जा रहा है, लेकिन आप वापस IE में एक ही प्रतिपादन समस्या के लिए आते हैं।

जो गालियाँ IE के गलत <col> के लिए शैलियों लागू करने की क्षमता एक हैक।

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(function() { 
       $('#click').click(function() { 
        $('table').toggleClass('compact', this.checked); 
       }); 
      }); 
     </script> 
     <style> 
      table.compact .junk { display: none; } 
     </style> 
     <!--[if lte IE 7]> 
     <style> 
      table.compact .junk { display: block; } 
      table.compact col.junk { display: none; } 
     </style> 
     <![endif]--> 
    </head> 
    <body> 
     <input type="checkbox" id="click" checked> 
     <table class="compact"> 
      <col /> 
      <col class="junk" /> 
      <tr> 
       <th>Hello</th> 
       <th class="junk">World</th> 
      </tr> 
      <tr> 
       <td>Foo</td> 
       <td class="junk">Bar</td> 
      </tr> 
      <tr> 
       <td>Foo</td> 
       <td class="junk">Bar</td> 
      </tr> 
     </table> 
    </body> 
</html>

वैकल्पिक रूप से, आप भी सिर्फ वास्तविक ब्याज के तत्वों jQuery में टॉगल कर सकते हैं:

$(function() { 
    $('#click').click(function() { 
     $('table.compact .junk').toggle(!this.checked); 
    }); 
});

स्रोत

2010-06-20 01:35:14 BalusC

मैंने पॉइंटी कोड के साथ थोड़ा और खेला और उसी निष्कर्ष पर पहुंचा ... 'डिस्प्ले बदलना: कोई नहीं;' 'दृश्यता: छुपा;' बनाता है यह चलेगा। अच्छी पोस्ट (+1)। –

वैसे पूरा बिंदु तालिका चौड़ाई को नियंत्रण में रखना है, इसलिए "छुपा" वास्तव में ऐसा नहीं करेगा। हालांकि, मैं निश्चित रूप से उस "कोला" चीज की कोशिश करूंगा; मैंने इसे पहले कभी नहीं देखा है! धन्यवाद @ बाल्लूसी !! आप कुछ प्रकार के ब्राउज़र निंजा – Pointy

की तरह हैं आपका स्वागत है। – BalusC

IE7 तालिका सीएसएस द्वारा अदृश्य बनाया कोशिकाओं बाद में वर्ग परिवर्तन (??) को दिखाई नहीं बनाया जा सकता है

उत्तर

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