css - 应用缩放 :80% to some browsers but not Internet Explorer

Question

我想解决我的 homepage 上的问题，因此当屏幕宽度在 1280px 和 1700px 之间时，主顶部轮播中的第一张图片不会显示所有内容(左侧文本为蓝色)。通过在 <section class="rotator-section"> 上使用 css“缩放”并将其设置为 80%:
@media screen and (min-width: 1280px) and (max-width: 1765px){ .rotator-section {zoom:80%;}}
这主要解决了某些宽度之间的问题。不幸的是，缩放在 Firefox 中根本不起作用并在 IE 中产生不需要的结果(图像保持相同的不需要的大小并且窗口的其余部分显示空白)。
为了至少对 Chrome、Opera、Edge 应用一个好的修复并且不在 IE 中产生不需要的结果，我想应用以下@media not 查询，以便 IE 10 和 11 不应用此 css:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .rotator-section {zoom:100% !important;} }
这不是一个完美的解决方案。我的许多网站访问者都使用 IE11、10 和 9 以及 Firefox。 这些浏览器的解决方案是什么？

Answer 1

有一种更简单的方法可以解决这个问题。背景图像的定位是由一位 CSS 引起的:

#homepage-rotator>div:nth-child(2) {
    background-position: right;
}

这迫使该图像未对齐。尝试删除该 CSS，或更改它:

#homepage-rotator>div:nth-child(2) {
    background-position: left;
}