.NET MVC 3 - 不需要的水平滾動條

我有一個頁面顯示書中包含圖片的文本。我遇到了某些情況下顯示水平滾動條的問題。該CSS如下：.NET MVC 3 - 不需要的水平滾動條

#textDisplay 
{ 
    width: 704px; 
    height: 750px; 
    margin: 0 0 20px 20px; 
    overflow-y: auto; 
    overflow-x; auto; 
} 

.picture 
{ 
    font: 13px Arial, sans-serif; 
    font-style: italic; 
    text-align: center; 
    border: 0; 
} 

.picture img 
{ 
    border: 1px solid #CCCCCC; 
    vertical-align: middle; 
    margin-bottom: 5px; 
} 

.left 
{ 
    margin: 0 20px 10px 20px; 
    float: left; 
}

的#textDisplay在環繞整個文本一個div使用。圖片的定義如下：

<div class="picture left"> 
    <img src="../../../../Content/Images/BookPhotos/Men Bowlers 1953.jpg" alt="Men Bowlers 1953 - drawings by Cyril Thompson" /> 
    <br />Men Bowlers 1953 – drawings by Cyril Thompson 
</div>

如果我遵循一個段落標籤P，則顯示水平滾動條。但是，如果我在h4標籤前面或後面跟着它，則不會顯示滾動條。

他們的定義是：

p 
{ 
    font-size: 10pt; 
    font-family: Verdana; 
    margin: 15pt 20px 15pt 20px; 
} 

h4 
{ 
    text-align: left; 
    font-size: 10pt; 
    font-weight: bold; 
    font-family: Arial, Verdana, Sans-Serif; 
}

任何人任何想法，爲什麼會這樣，我該如何解決？

它不會發生在Firefox或Chrome！

來源

2011-08-19 xiecs

使用此：

overflow-y: auto; 
overflow-x: hidden;

在看看：

來源

2011-08-19 09:10:12 thirtydot

我確實想要一個垂直滾動條。我嘗試過overflow-x：none;和overflow-x：隱藏;但我仍然得到一個水平滾動條。 – xiecs

你有一個我能看到的現場網站嗎？ – thirtydot

http://testdir1.royalleamingtonspabc.org.uk - 進入歷史區/保齡球100年並選擇第6章。第二張和第五張照片是導致問題的照片。 – xiecs

是，thirtydot，這爲我工作了。

我在我的身體標記下面有一個包裝div，它有橫向溢出，造成不必要的滾動條。

overflow-y: auto; 
overflow-x: hidden;

這樣做的伎倆。感謝發佈。

來源

2013-03-06 21:07:22

.NET MVC 3 - 不需要的水平滾動條

回答

相關問題