Html Edge/IE中神秘的水平滚动条
我有一个页面,显示了一个网格的图像,每个都有一些文本覆盖在。该页面在所有浏览器上看起来都很棒,除了IE/Edge,在IE/Edge中,水平滚动条会出现,即使页面向右滚动时没有显示任何内容。问题似乎来自覆盖文本。下面是有问题的标记的一个片段:Html Edge/IE中神秘的水平滚动条,html,css,Html,Css,我有一个页面,显示了一个网格的图像,每个都有一些文本覆盖在。该页面在所有浏览器上看起来都很棒,除了IE/Edge,在IE/Edge中,水平滚动条会出现,即使页面向右滚动时没有显示任何内容。问题似乎来自覆盖文本。下面是有问题的标记的一个片段: <trackitem class="tracklistview col-lg-3 col-md-6 col-sm-6 col-xs-6"> <div class="trackinner">
<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>
我已经使用绝对定位来水平和垂直地将文本置于底层图像的中心。水平滚动条似乎来自以下样式:
左:50%代码>
是否有任何方法可以防止滚动条同时保持覆盖文本的位置?尝试添加:溢出:隐藏代码>
关于您是否尝试添加溢出:隐藏代码>?不,我没有。但我做到了,这很有帮助!请将您的评论作为答案发布,以便我可以接受并关闭该线程。请记住,如果您将浏览器窗口的大小调整到屏幕外的位置,您将无法真正滚动。@TheLearner我也有同样的问题-还可以使用left:50%将文本居中放置在图像上;转换:转换(50%,50%)
。Edge(仅限Edge!)将文本容器计算为不在屏幕右侧!使用与您相同的方法,overflow-x:hidden
进行解析。找不到别的办法
.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;
}