Фоновое изображение слайдера не очень хорошо смотрится в Microsoft Edge - PullRequest
Новая
       8

Фоновое изображение слайдера не очень хорошо смотрится в Microsoft Edge

0 голосов
/ 03 декабря 2018

Я создал слайдер на своем веб-сайте Wordpress, и он отлично смотрится на 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: enter image description here

А вот как это выглядит в Google Chrome с тем же разрешением экрана: enter image description here

Вот ссылка на сайт: 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%;
}
}

Спасибо!

1 Ответ

0 голосов
/ 04 декабря 2018

Я запускаю веб-сайт на своей стороне в Edge (Microsoft Edge 42.17134.1.0) и Chrome. Веб-сайт хорошо работает в обоих браузерах.

Вы можете видеть мой скриншот: screenshot of Edge screenshot of Chrome

Возможно, версия повлияла на результат, поэтому я хотел бы спросить, какую версию Edge вы используете.Если возможно, поделитесь подробным исходным кодом, чтобы вам было легче помочь.

...