सीएसएस समस्या - क्षैतिज स्क्रॉलबार सामग्री छुपाता

मैं इस एक के साथ एक समस्या है ... क्योंकि यह मुझे स्क्रॉलबार देता है, लेकिन ऊंचाई ही रहता है तो पाठ स्क्रॉल पट्टी द्वारा कवर किया जाता ...सीएसएस समस्या - क्षैतिज स्क्रॉलबार सामग्री छुपाता

<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'> 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
</div> 
</td>

अग्रिम धन्यवाद!

स्रोत

2011-09-03 GuyFromOverThere

यह फ़ायरफ़ॉक्स 6, क्रोम 13, सफारी 5.1, ओपेरा 11.5 और आईई 9 में मुझे ठीक लग रहा है। आप किस संस्करण में परीक्षण कर रहे हैं? मुझे आईई 7 समस्या की तरह लगता है। – tw16

यह आईई 8 = में मेरे लिए बस्टेड है) (मुझे पता है ... मेरे पास आईई 8 क्यों है ???)। मुझे लगता है कि समस्या गायब 'ऊंचाई' मान है (जैसा कि @andreas उनके उत्तर में उल्लेख है)। उसे 'ऊंचाई: 50 पीएक्स' या कुछ (स्क्रॉल बार के साथ पाठ दिखाने के लिए काफी बड़ा) की आवश्यकता है – jadarnel27

आपको ऊंचाई निर्दिष्ट करने की आवश्यकता क्यों है? – melhosseiny

अपने सीएसएस को बाहरी स्टाइल शीट पर ले जाएं और केवल उन ब्राउज़रों को लक्षित करने के लिए एक सशर्त टिप्पणी का उपयोग करें जिनके साथ आपको समस्या है (मैंने IE7 से कम या बराबर उपयोग किया है क्योंकि मैं IE8 में दोहराना नहीं कर सकता)। मैंने नीचे पैडिंग जोड़ा है।

लाइव उदाहरण: http://jsfiddle.net/tw16/Vx9HZ/

<head> इस तरह में सशर्त टिप्पणी रखो:

<head> 
    <!--[if lte IE 7]> 
     <style>div.messages {padding:0 0 22px;}</style> 
    <![endif]--> 
</head>

सीएसएस: बाह्य शैली पत्रक में ले जाया गया।

div.messages { 
    border:0px; 
    padding:0 0 0; 
    width:100%; 
    overflow-x:auto; 
    background-color:#66C2FF; 
}

HTML: बाहर Stripped स्टाइल।

<td class='messages'> 
    <div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
    </div> 
</td>

स्रोत

2011-09-03 19:03:53 tw16

यह काम करता है लेकिन टीडी एक टेबल में है, इसलिए यह अलग-अलग – GuyFromOverThere

@ user924770 बनाता है: क्या आप अधिक कोड पोस्ट कर सकते हैं, इसलिए मैं उस प्रभाव को देख सकता हूं जिसके बारे में आप बात कर रहे हैं। स्क्रॉलबार * मतलब * दिखाई देने के लिए भी हैं या क्या आप सामग्री को फिट करने के लिए 'div' विस्तार करने की कोशिश कर रहे हैं? – tw16

<तालिका शैली = 'चौड़ाई: 80%;'> <तालिका शैली = 'चौड़ाई: 100%;'>

– GuyFromOverThere

यदि मैं आपको सही ढंग से समझता हूं तो निम्नलिखित को आपकी समस्या का समाधान करना चाहिए और निर्दिष्ट होने पर चौड़ाई को समायोजित करने के लिए हमेशा एक लाइन तोड़ना चाहिए। इसे अपनी शैली = "" में रखें।

word-wrap: break-word

पीएस। इसके अलावा, आपके पास ऊंचाई ऊंचाई के साथ "ऊंचाई:" है।

स्रोत

2011-09-03 18:19:08 Andreas

हाँ srry मैं पहले से ही तय कर चुका हूं लेकिन यह अभी भी काम नहीं करेगा और शब्द-लपेटना क्रॉस-ब्राउजर नहीं है .... – GuyFromOverThere

मुझे पूरा यकीन है कि कुछ ब्राउज़र बस "लंबे शब्द" तोड़ते नहीं हैं और वहां इसके चारों ओर कोई रास्ता नहीं है। लेकिन यही शब्द-रैप है और अधिकांश ब्राउज़र वास्तव में इसका समर्थन करते हैं। अन्यथा, टीडी पर nowrap = "nowrap" आज़माएं, यह इसे विरासत ब्राउज़र पर मजबूर कर सकता है। – Andreas

इससे समस्या हल नहीं होगी। भले ही शब्दों को लपेट लिया गया हो, फिर भी स्क्रॉलबार टेक्स्ट के नीचे कवर करेगा। – tw16

यह मेरे लिए काम करता है:

<html> 
    <body> 
    <td class='messages'> 
     <div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'> 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
     </div> 
    </td> 
    </body> 
</html>

मैं div कि काफी बड़ा पाठ और स्क्रॉल पट्टी को दिखाने के लिए था के लिए एक height निर्दिष्ट। =) उम्मीद है कि यह मदद करता है।

स्रोत

2011-09-03 18:25:08 jadarnel27

यह एक अच्छा समाधान है, इसके अलावा पाठ और सामग्री की लंबाई मेरे पृष्ठ पर भिन्न हो सकती है .... इसलिए 50 पीएक्स हमेशा काम नहीं करता – GuyFromOverThere

सीएसएस समस्या - क्षैतिज स्क्रॉलबार सामग्री छुपाता

उत्तर

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