CSS Specificità diversa su firefox e explorer
Inviato: lunedì 1 giugno 2015, 16:46
Salve, sto scrivendo una pagina web e, tramite CSS, ho creato un semplice effetto che genera un triangolo sul bordo di un div attraverso un before.
Il punto è che su firefox riesco a vederlo senza problemi mentre su explorer ho visto da sorgente che la classe esiste ma il before (solo il before) è sovrascritto da non ho capito cosa.
Come è possibile che la specificità cambi da browser a browser e come faccio a capire chi è che mi sovrascrive il before?
Il codice html è questo:
mentre il CSS in questione è
Il punto è che su firefox riesco a vederlo senza problemi mentre su explorer ho visto da sorgente che la classe esiste ma il before (solo il before) è sovrascritto da non ho capito cosa.
Come è possibile che la specificità cambi da browser a browser e come faccio a capire chi è che mi sovrascrive il before?
Il codice html è questo:
Codice: Seleziona tutto
<div class="dropdown-menu">
<div class="col-xs-4 headerProductsLeftPanel">
<a class="col-xs-12 headerProductsLeftPanelText" href="#">Finanziamenti: cosa è</a>
<a class="col-xs-12 headerProductsLeftPanelText" href="#">Prodotti</a>
<a class="col-xs-12 headerProductsLeftPanelText" href="#">La specializzazione MCI</a>
</div>
<div class="col-xs-8 product_group">
<span class="col-xs-12 headerLabelScegliProdotto">Scegli il prodotto che soddisfi i tuoi bisogni</span>
<div class="col-xs-4 cont_prodotto gnuolane">
<a style="text-transform: uppercase;" href="#">Nova+</a>
</div>
<div class="col-xs-4 cont_prodotto gnuolane">
<a style="text-transform: uppercase;" href="#">Energia Sostenibile</a>
</div>
<div class="col-xs-4 cont_prodotto gnuolane">
<a style="text-transform: uppercase;" href="#">Internazionalizzazione</a>
</div>
</div>
</div>Codice: Seleziona tutto
.product_group{
padding-bottom:45px;
border-left:1px solid #ccc;
min-height:365px;
padding-left: 40px;
padding-right: 0;
width: 65%;
}
.product_group:before{
content: '';
display: block;
position: absolute;
top: 45%;
left: 0%;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #eeeeee;
margin-left:-10px;
z-index:10000px;
}