27801 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un petit souci de compatibilité que je ne parviens toujours pas à bien comprendre.

Voilà mon problème : J'ai des annonces web, sur ces annonces je dois permettre de mettre en visibilité une brève descriptions. J'ai donc ajouter une description et avec un snippet conçu sur mesure, j'ai ajouter du CSS permettant de mettre la description sur 3 lignes mais de cacher le reste des paragraphes/lignes. Quelques choses de très simple en apparence. Mais j'ai remarquer un gros soucis au niveau du design sur Safari mobile et Mac. J'ai alors essayer de chercher si Safari ne prenait pas en charge un des éléments CSS mais je n'ai pas trouver de solution pour le moment.

Je me suis donc dit qu'une personne sur Alsacreations aurait déjà rencontrer le problème.

Voici un exemple plus parlant ici :
Sur chrome & compagnies
Sur Safari Mac/Mobile

Auriez vous une idée du problème. Je pensais que safari ne prenait pas en charge webkit mais non !

Le snippet code me permettant de cacher la description de l'annonce sur 3 lignes comme sur la version chrome :


.lf-item-info>ul li {
	display:block;
	max-width: 100%;
	white-space: normal;
 	text-overflow: ellipsis; 
	overflow: hidden;
 	display: -webkit-box;
  	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


Est ce que vous avez une idée ? Ou avez vous déjà eux le même problème ? Smiley sweatdrop

Pourtant sur tous les autres navigateurs ça fonctionne correctement sauf sur Safari !

Merci d'avance pour votre aide !! Smiley rolleyes
Salut,

tu pourrais nous filer le code html/css de la page plutôt qu'une image ? genre sur un jsfiddle)

Je pense que cela sera plus simple pour essayer de faire quelques tests sur ce qui peut poser problèmes Smiley sweatdrop

Bonne journée,
Mathieu