神祕的水平滾動條在邊緣/ IE

我有一個頁面，顯示一個圖像的網格，每個圖像的覆蓋範圍爲http://www.peppy-burro.com/blog/。除了IE/Edge以外的所有瀏覽器，該頁面看起來都很棒，其中水平滾動條出現，即使在頁面向右滾動時沒有任何內容可顯示。問題似乎來自疊加文本。這裏是有問題的標記的一個片段：神祕的水平滾動條在邊緣/ IE

<trackitem class="tracklistview col-lg-3 col-md-6 col-sm-6 col-xs-6"> 
      <div class="trackinner"> 
       <div class="trackthumb"> 
        <img class="img-fluid post-thumbnail" src="/blog/wp-content/uploads/2016/09/spanish-verbal-phrases-featured-1.jpg"> 
        <div class="post-overlay"> 
         <div class="post-overlay-text"> 
          <timetoread><i class="fa fa-clock-o"></i> 24 minutes to read</timetoread>       <h2><a href="/blog/spanish-verbal-phrases-infinitive/" itemprop="name">31 Bare Essential Spanish Verbal Phrases Using the Infinitive</a></h2> 
          <p>Your Ultimate Guide to Some of the Most Ubiquitous Verbal Phrases in Spanish II</p> 
         </div> 
        </div> 
       </div> 
       <p class="post-info"> 
        <i class="post-icon post-date-icon fa fa-calendar"></i> 
        <a href="/blog/2016/9">September</a> <a href="/blog/2016/9/20">20</a>, <a href="/blog/2016">2016</a>     <span class="separator"></span> 
        <span class="tagspan"><span class="tagstart"><i class="post-icon post-author-icon fa fa-user"></i><a href="/blog/author/amitschandillia/">Amit Schandillia</a></span></span> 
        <span class="separator"></span> 
        <!-- tags --> 
        <span class="tagspan"><span class="tagstart"><i class="post-icon post-tags-icon fa fa-tags"></i><a href="/blog/tag/grammar/">Grammar</a></span></span> 
       </p> 
      </div> 
     </trackitem>

管轄的覆蓋是作風：

.post-overlay-text { 
    padding-left: .3em; 
    padding-right: .3em; 
    position: absolute; 
    z-index: 2; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -moz-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    -o-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    width: 100%; 
    text-align: center; 
}

我已經使用絕對定位的形式在底層圖像水平和垂直居中。水平滾動條似乎是從下面的樣式來：

left: 50%;

有什麼辦法來防止滾動條，同時也保持了疊加文本的位置？

來源

2017-03-08 TheLearner

你有沒有嘗試添加'溢出：隱藏;'？ –

不，我沒有。但我只是做了，它幫助！您能否請您發表評論作爲答案，以便我可以接受並關閉該線程？ – TheLearner

完成，謝謝:) –

嘗試添加：overflow: hidden;

問候

來源

2017-03-08 13:28:35

神祕的水平滾動條在邊緣/ IE

回答

相關問題