CSS sorunu - yatay kaydırma çubuğu içeriği gizleyen

bana kaydırma çubuğunu verir ancak yükseklik aynı kalır böylece metin kaydırma çubuğu ile kaplıdır ... ... çünkü bu birinde bir sorun varCSS sorunu - yatay kaydırma çubuğu içeriği gizleyen

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

Şimdiden teşekkürler!

kaynak

2011-09-03 GuyFromOverThere

Firefox 6, Chrome 13, Safari 5.1, Opera 11.5 ve IE9'da bana iyi görünüyor. Hangi sürümü test ediyorsunuz? Bana bir IE7 problemi gibi geliyor. – tw16

IE8'de benim için bozuldu =) (Biliyorum ... neden IE 8'e sahibim ???). Bence sorun "boy" eksikliğidir (@andreas cevabında bahseder). Yükseklik: 50px veya başka bir şeye (kaydırma çubuğundaki metni göstermek için yeterince büyük) ihtiyacı var – jadarnel27

Yüksekliği neden belirtmeniz gerekiyor? – melhosseiny

CSS'nizi harici bir stil sayfasına taşıyın ve sorunla karşılaştığınız tarayıcıları hedeflemek için koşullu bir yorum kullanın (IE8'de çoğaltılamadığım için IE7'ye eşit veya daha düşük kullanıyorum). Dibe dolgu ekledim.

Canlı örnek: http://jsfiddle.net/tw16/Vx9HZ/

böyle <head> koşullu yorumunu koyun:

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

CSS: harici stil sayfasına taşındı.

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

HTML: dışarı Stripped stil.

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

kaynak

2011-09-03 19:03:53 tw16

bu çalışır ama td bir tablo içinde bu yüzden farklı yapar – GuyFromOverThere

@ user924770: Daha fazla kod gönderebilir misiniz, böylece bahsettiğiniz etkiyi görebiliyorum. Ayrıca, kaydırma çubukları * görüntülenecek * mi yoksa "div" kelimesinin içeriğe uyacak şekilde genişletmeye mi çalışıyorsunuz? – tw16

– GuyFromOverThere

Eğer doğru bir şekilde anlıyorsam, aşağıdakiler sorununuzu çözmeli ve DAİMA belirtilirse genişliğe uyması için bir satır kesmelidir. Bunu tarzınıza = "" koyun. PS Ayrıca, yüksekliği belirtilmemiş "height:" var.

kaynak

2011-09-03 18:19:08 Andreas

yeah srry ben zaten bunu düzeltdi ama hala işe yaramaz ve word-wrap tüm tarayıcılar değil .... – GuyFromOverThere

Bazı tarayıcıların sadece "uzun kelimeler" ve orada kırmak değil eminim etrafında hiçbir şekilde. Ancak bu, kelime sarmanın ne işe yaradığı ve çoğu tarayıcı tarafından desteklenecektir. Aksi takdirde, TD'de nowrap = "nowrap" ı deneyin, eski tarayıcılarda zorlayabilir. – Andreas

Bu, sorunu çözmeyecektir. Kelimeler sarılsa bile, kaydırma çubuğu yine de metnin altını kaplar. – tw16

Bu benim için çalışıyor:

<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>

Ben metin ve kaydırma çubuğunu göstermek için yeterince büyük div için height belirtildi. =) Umarım yardımcı olur.

kaynak

2011-09-03 18:25:08 jadarnel27

Bu, metin ve içeriğin uzunluğu sayfamda değişebilir dışında iyi bir çözüm .... bu yüzden 50 px her zaman işe yaramaz – GuyFromOverThere

CSS sorunu - yatay kaydırma çubuğu içeriği gizleyen

cevap

İlgili konular