位于图像上的文本在 Internet Explorer 中看起来不同

Question

无论用户的屏幕尺寸/浏览器如何，我都试图将“已售出”一词保留在图片的右上角，位于同一位置。它在 Chrome 中运行良好，但是当我使用 Internet Explorer 时，“SOLD”显示在完全不同的位置，宽度为 1440 像素，而不是在我的 Chrome 浏览器上显示为 1440 像素。

我有一个无序列表，其中包含一个包含几个 div 的列表项和一个图像。你可以看我的网站here

对于我要显示“SOLD”的列表项，列表项代码如下所示：

<li class="list__item">
            <figure class="list__item__inner">
     <a class="divLink" href="http://www.Demo">
            <img src="http://media-cdn.tripadvisor.com/media/photo-o/01/ca/eb/48/clenahoo-house.jpg" alt="" />
             <div class="caption">SOLD</div>
             <div class="titlebox">Demo</div>
             <div class="locationbox">Demo</div>
            <div class="pricebox">Demo Demo</div>
     </a>
        </li>

.

您可以看到我使用了一个名为“caption”的类来显示当前 SOLD。这个元素的 CSS 是：

.

.list__item .caption    {
    position: absolute;
    width: 20%;
    height: 10%;
    top: 6%;
    left: 56%;
    font-size: 3.3vw;
    font-weight:bold;
    color: red;
    }

字体大小通过使用 'vw' 进行响应，但在 Internet Explorer 中，一旦视口达到约 1,000 像素宽，SOLD 文本就会粘在图像之外，但在 Chrome 中相同的视口宽度不会发生这种情况。

我该如何解决这个问题？非常感谢！！

Answer 1

对我来说，当视口变宽时，SOLD 文本会出现在任何浏览器的图像之外：Chrome、IE 和 Firefox。您可以使用em 而不是vw，并使用媒体查询来更改不同视口的字体大小。 font-size: 3.3em; 在宽视口上工作得很好。

对于较窄的视口，您可以使用媒体查询：

@media (max-width: 960px) {
 .list__item .caption    {
    font-size: 2em;
}

@media (max-width: 480px) {
 .list__item .caption    {
    font-size: 1.3em;
}

不要试图让您的页面在每个浏览器、每个视口中看起来都一样。