Переполнение скрыто для тега заголовка, не работающего в мобильных браузерах, Chrome и Safari. Работает только в настольных браузерах - PullRequest
Новая
       32

Переполнение скрыто для тега заголовка, не работающего в мобильных браузерах, Chrome и Safari. Работает только в настольных браузерах

0 голосов
/ 26 февраля 2020

скриншоты рабочего стола и мобильного не работает

У меня есть фрагмент кода, чтобы показать, что я пытаюсь сделать. Я намеренно установил более широкую ширину для заголовка, который находится внутри div, содержащего слайд-шоу. Я хочу, чтобы ширина заголовка была обрезана по закругленному краю изображения. У меня есть нечто подобное, работающее в настольных браузерах, но оно не отображается в Safari или Chrome на моем iphone. Я установил переполнение: скрыто для родительского элемента div, который скрывал внешние части заголовка, как я и предполагал. Но я не могу заставить его правильно отображаться на мобильных устройствах. (Примечание: скрытый переполнение скрывает все во фрагменте, и я тоже не уверен, что там происходит.) целая страница. 

div {
   position: relative;
   /* overflow: hidden; */
}
h3 {
   margin: 0;
   z-index: 4;
   width: 300px;
   height: 20px;
   position: absolute;
	/* top: 150px; */
	bottom: 0;
	left: 0;
	right: 0;
  background-color: yellow;
  text-align: center;
}
img {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3;
   animation: slideshow 12s linear 0s infinite;
   border-radius: 25px;
}

img:nth-child(2) {
   z-index: 2;
   animation-delay: 4s;
}

img:nth-child(3) {
   z-index: 1;
   animation-delay: 8s;
}

@keyframes slideshow {
   25% {
      opacity: 1;
   }
   33.33% {
      opacity: 0;
   }
   91.66% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}
<div>
<h3>Slideshow</h3>
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
</div>

1 Ответ

0 голосов
/ 27 февраля 2020

Теперь я вижу, что вы добавили изображения. У вас там проблема с маржой. Элемент h3 добавляет запас. Если вы добавите 'margin: 0' к вашему стилю h3, вы увидите, что произойдет. Еще одна вещь, вам нужно удалить «top: 150px;». И в следующий раз вы должны поставить какой-нибудь рабочий код. В добавленном вами примере вы ничего не видите, по крайней мере, вы добавляете значение высоты в основной div.

...