web-dev-qa-db-fra.com

Texte-décoration: aucun ne fonctionne

Totalement dérouté! J'ai essayé de réécrire la ligne text-decoration: none de plusieurs manières. J'ai également réussi à redimensionner le texte en le ciblant, mais le code text-decoration: none ne prendra pas.

Aide très appréciée.

Code

.widget    
{
     height: 320px;
     width: 220px;
     background-color: #e6e6e6;
     position: relative;                              
     overflow: hidden;                          
}


.title    
{
     font-family: Georgia, Times New Roman, serif;
     font-size: 12px;
     color: #E6E6E6;
     text-align: center;
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: #4D4D4D;    
     position: absolute;
     top: 0;
     padding: 5px;
     width: 100%;
     margin-bottom: 1px;
     height: 28px;
     text-decoration: none;
}

a .title    
{
     text-decoration: none;
}
<a href="#">
    <div class="widget">  
        <div class="title">Underlined. Why?</div>  
    </div>
</a>

csshtmltext-decorations
23
Olly F

Vous avez un élément de bloc (div) dans un élément en ligne (a). Cela fonctionne en HTML 5, mais pas en HTML 4. Ainsi, seuls les navigateurs supportant réellement HTML 5.

Lorsque les navigateurs rencontrent un balisage non valide, ils essaient de le corriger, mais différents navigateurs le font de différentes manières, le résultat varie donc. Certains navigateurs déplacent l'élément de bloc en dehors de l'élément en ligne, d'autres l'ignorent.

27
Guffa
a:link{
  text-decoration: none!important;
}

=> Travailler avec moi :), bonne chance

25
DongNguyen

Utilisez CSS Pseudo-classes et donnez à votre balise une classe, par exemple:

<a class="noDecoration" href="#">

et ajoutez ceci à votre feuille de style:

.noDecoration, a:link, a:visited {
    text-decoration: none;
}
6
Mimeshead

Ajoutez cette déclaration à votre balise d’entête:

<style>
a:link{
  text-decoration: none!important;
  cursor: pointer;
}
</style>
5
Ram Madhavan

Essayez de placer votre text-decoration: none; sur votre css.

3
Esci Villagonzalo Morales

J'ai une réponse:

<a href="#">
    <div class="widget">  
        <div class="title" style="text-decoration: none;">Underlined. Why?</div>  
    </div>
</a>​

Ça marche.

1
jnhy

Il n'y a pas de soulignement même si j'ai supprimé 'text-decoration: none;' de votre code . Mais j'ai eu une expérience similaire.

Puis j'ai ajouté un code

a{
 text-decoration: none;
}

et

a:hover{
 text-decoration: none;
}

Alors, essayez votre code avec: hover.

1
SungWoo_Park

J'avais beaucoup de mal à la tête lorsque j'ai essayé de personnaliser un thème WordPress et que la décoration du texte ne m'a pas aidée . Dans mon cas, j'ai également dû supprimer la boîte-ombre.

a:hover {
    text-decoration: none;
    box-shadow: none;
}
1
Zoltan Febert

si vous voulez une barre de navigation faites

ul{ list-style-type: none; } li{text-decoration: none;
  • Cela lui donnera envie de faire le style du type de liste à Aucun ou rien

avec la balise <a>:

a:link {text-decoration: none}
1
PIZZZZZZZZZZZA is here

J'ai utilisé le code ci-dessous pour que le mien fonctionne sous Chrome. Vous pouvez ajuster l'imbrication:

a:-webkit-any-link { color: black; }
0
Eben Hafkamp

essayez d'ajouter ceci à votre feuille de style:

a {text-decoration:none;}
0
Losbear

Ajoutez une classe spécifique pour tous les liens:

html: 

<a class="class1 class2 noDecoration"> text </a>

en css:

.noDecoration {
  text-decoration: none;
}
0
Alouani Younes