CSS中存在'overflow-y：auto'問題，導致Chrome中出現問題，但不是Firefox中的問題

在我的應用程序中，文本由用戶輸入，顯示在具有固定寬度和高度的div以及overflow-y:auto屬性中。在HTML看起來像這樣：CSS中存在'overflow-y：auto'問題，導致Chrome中出現問題，但不是Firefox中的問題

<div class="description_div scroll-pane jspScrollable" style="overflow-x: hidden; overflow-y: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 290px; " tabindex="0"> 
    <div class="jspContainer" style="width: 290px; height: 160px; "> 
     <div class="jspPane" style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 280px; left: 0px; "> 
      <p>This is an original song written and performed by me, Jessica Speziale. I wrote this in early May 2011 :) Let me know what you think!</p> 
      <p>Studio is 3 DAYS AWAY!!! *dies* I’ll be sending daily studio blogs via my newsletter! Also, if you sign-up for the newsletter before August 31st, you’ll be entered to win a free copy of my EP! Woot!! </p> 
      <p>Sign up here: http://www.reverbnation.com/page_object/join_mailing_list/artist_868563</p> 
     </div> 
    </div> 
</div>

外格是一個我指定，和所有其他的div動態與jscrollpane plugin產生。這裏是外部div的css：

.description_div{ 
    float:right; 
    width:280px; 
    height:160px; 
    overflow-y:auto; 
    padding:5px; 
    margin-left:5px; 
}

問題是，這在Firefox中正確呈現，但不是在Chrome中。下面是它是如何在Firefox中呈現一峯：

Firefox-1 Firefox-2

，這裏是它是如何呈現在Chrome：

Chrome-1 Chrome-2

正如你可以看到，在Firefox瀏覽器剪切div底部的長url，以便所有文本都符合div的寬度，並添加一個垂直滾動條。

在Chrome中，它會切斷底部文本的最後一段，並僅添加一個水平滾動條。

這是爲什麼，有沒有解決辦法來解決這個問題？

來源

2011-08-19 Justin Meltzer

嘗試一個完整的溢出：自動。除-y或-x業務外，不需要使用其他設置。

來源

2011-08-19 03:44:51

似乎沒有區別 –

滾動酒吧是醜陋的任何方式......爲什麼不使用像這樣的CSS動畫：http：//www.nikesh.me/blog/2010/05/sexy-image- hover-effects-using-css3/ 讓它繚繞，滑過文本或其他有趣的東西。 –

Firefox中的默認包裝算法可以在正斜槓上插入換行符，而在Chrome中不包含換行符。您可以將word-wrap: break-word;樣式添加到外部div以強制包裝。確保padding-right沒有被設置爲0（從你的代碼示例中不清楚它是否當前是），或者由於滾動條，某些文本將不可見。

來源

2011-08-19 05:07:12

CSS中存在'overflow-y：auto'問題，導致Chrome中出現問題，但不是Firefox中的問題

回答

相關問題