Question

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

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

对于我想显示“已售出”的列表项，列表项代码如下所示：

<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,000px宽，SOLD文本就会粘在图像外部，但这不会发生在Chrome中相同的视口宽度。 / p>

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

Answer 1

对我来说，当视口变宽时，已售出的文字会粘贴在任何浏览器的图像外：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;
}

请勿尝试在每个浏览器的每个视口中使您的页面看起来相同。

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

1 个答案: