Problème de CSS avec différents navigateurs

Bonjour,

J'ai un pbroblème d'integration.
Mon code css fonctionne avec le navigateur google chrome et il y a quelque éléments qui ne fonctionne pas avec Opera et Safary.

comment je peux régler ce probléme pour qu il détecte mon navigateur et change le style.

8-)

voila mon code

Code:

---

1 2 3 4 5 6 7

<ul class="HomeUserBlock btn-group" ng-controller="spaCtrl:menuConnect"> <img class="imageWallaFixHome" ng-src="{{getProfileImage(user.profile.mainImage)}}"/> <a ng-click="EditMyprofile()"><p class="HomeUserName" dropdown-toggle> <i ng-show="isConnected" class="fa fa-pencil" style="font-size: 14px;" ></i> {{isConnected ? user.profile.firstName : 'Accedi'}} </p> </a> </ul>

---

et le css :

Code:

---

1 2 3 4 5

.HomeUserName { margin-left: 10px; font-size: 20px; color:#fff; }

---

Code:

---

1 2 3 4 5 6

.HomeUserBlock { display: flex; float: right; margin-right: 10px; margin-top: -60px; }

---

Le code est fonctionnel sous google chrome et non sur safary

le lien est se met au dessous voir l'image

Pièce jointe 181226 celle de safary

Pièce jointe 181225 celle de google chrome

Bonjour,
il faut commencer par écrire du code correct, si on résume le tien

Code:

---

1 2 3 4 5 6 7 8

<ul> <img> <a> <p> <i></i> </p> </a> </ul>

---

une <UL> doit avoir un/des <LI>
Ensuite il ne faut pas se surprendre que le <P> passe à la ligne, c'est un élément de type block.

Reste dans une construction simple cela t'éviteras de mettre du CSS, pas forcément compatible, pour faire ressembler à une structure tout simplement simple :mouarf:

Code:

---

1 2 3 4 5 6 7 8

<ul> <li> <img> <a> <i></i> </a> <li> </ul>

---

Dernier point, cale n'est pas compatible avec Safari, sous windows ??? parce plus maintenu depuis 2012, alors ne gaspille pas trop de temps mets le plutôt à profit pour apprendre les bases du HTML/CSS.