html - Edge/IE 中神秘的水平滚动条

Question

我有一个页面显示图像网格，每个图像都有一些文本覆盖在 http://www.peppy-burro.com/blog/ 上.该页面在除 IE/Edge 之外的所有浏览器上看起来都很棒，IE/Edge 会出现水平滚动条，即使当页面向右滚动时没有任何内容可显示。问题似乎来自覆盖文本。这是相关标记的片段:

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

我使用绝对定位将文本水平和垂直居中放置在底层图像上。水平滚动条似乎来自以下样式:

左:50%；

有没有办法在保持覆盖文本位置的同时防止滚动条？

Answer 1

尝试添加:overflow: hidden;

问候