web-dev-qa-db-fra.com

CSS approprié pour générer une coche li qui fonctionne sur plusieurs navigateurs

J'utilise le CSS suivant pour ajouter des coches avant mon <li>liste les éléments:

ul.checkmark li:before {
    content:"\2713\0020";
}

Et puis dans le HTML:

<ul class="checkmark">
   <li>Learn the keyboard at your own pace</li>
</ul>

Fonctionne très bien dans Safari, Firefox et Chrome, mais affiche des "boîtes de panique" sur IE8.

Safari: alt text

IE8:alt text

Existe-t-il un moyen portable de spécifier une belle coche qui fonctionnera dans tous les principaux navigateurs?

EDIT Solution: J'ai fini par utiliser une variante de la réponse de meder ci-dessous:

ul.checkmark li {
    background:url("../checkmark.gif") no-repeat 0 50%;
    padding-left: 20px;
}

ul.checkmark {
    list-style-type: none;
}
htmlcssinternet-explorer
34
George Armhold
li { background:url(/images/checkmark.gif) no-repeat 0 50%; }

Ce serait probablement le seul moyen de le faire fonctionner de manière cohérente dans le IE pre 8/9.

18
meder omuraliev
ul
{
    list-style-image:url("/default_unchecked.png");
    /* other list styles*/
 }

puis modifiez-le plus tard via javascript, peut-être.

$('.selected').css("list-style-image", "url('/images/blueball.gif')");
5
Robin Maben

Hmmm que diriez-vous d'aller avec une petite image à la place, alors vous obtiendrez une compatibilité complète avec pratiquement tous les navigateurs

Jetez également un œil à cette question passée Cochez le symbole dans HTML/XHTML

4
Ross

Je ne sais pas si quelqu'un doit encore prendre en charge IE8 mais je voulais savoir pourquoi IE8 crée ces boîtes, j'ai donc cherché sur Internet et trouvé ce message: caractères Unicode et Internet Explorer

Donc, sur la base des réponses à cette question, il semble que vous pouvez utiliser la méthode décrite par l'OP, il vous suffit de spécifier une police Unicode à faire IE8 heureux. Donc, en théorie, cela devrait fonctionner correctement:

ul.checkmark {
    list-style-type:none;
}
ul.checkmark li:before {
    content:"\2713\0020";
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
<ul class="checkmark">
    <li>Learn the keyboard at your own pace</li>
</ul>
2
Kodos Johnson

Je me rends compte que c'est un vieux post mais, avec les nombreuses variations de tailles d'écran et de densités de pixels sur les appareils mobiles, je pense que la meilleure approche est de convertir votre icône en police avec un programme comme Icomoon: https: // icomoon.io/

Mettez les fichiers de police sur votre serveur et le CSS ressemblera à ceci.

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('/fonts/IcoMoon-Free.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'IcoMoon-Free' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\ea10";
}

Le html sera quelque chose comme ceci:

<span class="icon icon-checkmark"></span>
0
dlewis22