html - slider 背景图像在 Microsoft Edge 上看起来不太好

Question

我在我的 Wordpress 网站上创建了一个 slider ，它在 Google chrome 上看起来很好，但是当我在我的 Microsoft Edge 上打开它时，它会放大图片，使它看起来很大且像素化。我可以添加任何 CSS 代码以使背景在 Microsoft Edge 上看起来正常吗？

        <div class="elementor-widget-container">
            <div class="elementor-slides-wrapper elementor-slick-slider" dir="ltr">
    <div class="elementor-slides" data-slider_options="{&quot;slidesToShow&quot;:1,&quot;autoplaySpeed&quot;:4000,&quot;autoplay&quot;:true,&quot;infinite&quot;:true,&quot;pauseOnHover&quot;:false,&quot;speed&quot;:500,&quot;arrows&quot;:false,&quot;dots&quot;:false,&quot;rtl&quot;:false,&quot;fade&quot;:true}" data-animation="">
        <div class="elementor-repeater-item-c324989 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR></div></div></div></div><div class="elementor-repeater-item-15a3089 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR></div></div></div></div><div class="elementor-repeater-item-20784b4 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div></div></div></div>         </div>
</div>
        </div>
        </div>

这是它在 Microsoft Edge 上的样子:

下面是在具有相同屏幕分辨率的 Google Chrome 上的显示效果:

这是网站链接:www.naotech.com/video-conference

当前的自定义 CSS:

@media screen and (-webkit-min-device-pixel-ratio:0)  and (min-width: 414px) {

.elementor-1063 .elementor-element.elementor-element-da9971b .slick-slide-inner
{
    background-image: linear-gradient(to top, rgba(28,34,38,1) 0%,rgba(0,0,0,0) 70%) !important;
    background-size: 100%;

}}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 414px) {
.elementor-1063 .elementor-element.elementor-element-fb358d5 .elementor-repeater-item-15a3089 .slick-slide-inner {
        background-image: linear-gradient(to top, rgba(28,34,38,1) 0%,rgba(0,0,0,0) 50%) !important;

}}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 414px) {
.elementor-1063 .elementor-element.elementor-element-da9971b .elementor-slide-heading
{
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
.elementor-element .slick-slide-bg{
background-attachment:fixed;
background-position:center 100%;
}
}

谢谢!

Answer 1

我已经在 Edge(Microsoft Edge 42.17134.1.0)和 Chrome 上运行了我这边的网站。该网站在这两种浏览器上运行良好。

你可以看到我的截图:

可能是版本影响了结果，请问你用的是什么版本的Edge。如果可能，请分享您的详细源代码，以便更轻松地帮助您。