Comment résoudre espace réservé CSS différence à travers les différents navigateurs?

Je suis en utilisant Twitter bootstrap CSS. Ci-dessous vous pouvez voir comment le même code est affiché différemment avec FireFox et Chrome.

C'est assez étrange. Firebug me dit que l'espace réservé du css est définie comme ce gris clair:

:-moz-placeholder {
    color: #999999;
}

Devraient avoir une incidence sur tous les espaces réservés à l'intérieur de tous les éléments de son fait correctement dans le navigateur Chrome.
Mais dans Firefox pourquoi textareas correctement appliquée, mais input ne l'est pas? Comment puis-je résoudre ce problème?

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

Chrome:

Firefox:

mise à jour:

Les commentaires ci-dessous m'a donné une idée:

Input a contrairement à textarea la color: #9999 entrée barrée, ce qui signifie quelque chose est primordial.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

C'est en fait ce color: #555555;. Quand j'ai désactiver firebug, tout cela fonctionne. Comment se fait-Chrome ne se soucient pas de cela, mais Firefox? Des conseils comment résoudre ce à travers les deux navigateurs? Je suis encore nouveau pour le css.

il fonctionne pour moi ici - jsfiddle.net/WHTmC mais vous voudrez peut-être essayer de définir la règle de ce input:-moz-placeholder
Fonctionne pour moi aussi.
c'est tellement étrange. Je peux voir votre code fonctionne en ligne. Mais, localement, il n'est pas. Peut cela peut éventuellement être ainsi? Même le code local est différent sur les deux navigateurs...
vous pourriez avoir une règle CSS avec une priorité plus élevée sur ce champ de saisie, comme #formName input { color: #000 }
Du bon sens, mais ne devrait pas affecter les Chrome? 🙂

OriginalL'auteur Houman | 2012-07-04

8

J'ai fait un peu de violon il y a longtemps à cause de cette étrange pseudo-élément, le résultat ? Vous ne pouvez pas ajouter un coma entre le sélecteur, vous devez spécifier votre règle deux fois, c'est une honte.

Le code HTML:
```
<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />
```
Le CSS:
```
/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
    color: red;
}

/* Works on Firefox */    
#test-moz:-moz-placeholder {
    color: red;
}

/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
    color: red;
}

/* Works on both */
.test-both::-webkit-input-placeholder {
    color: red;
}
.test-both:-moz-placeholder {
    color: red;
}
```
Le Violon.

Intéressant. Je peux voir la différence. Je vous remercie. L'application de cette solution à l'ensemble des espaces réservés semble difficile. J'ai essayé de coller les deux dernières lignes sans le .test-both:: mais que color: #555555; encore la remplace. J'ai fini par prépondérant sur le but de le fixer sur les deux navigateurs comme ceci: input[type="text"] { color: #999999;}. Vous ne savez pas si c'est la meilleure façon de le faire.
Sous Firefox 19-je utiliser .test-both::-moz-placeholder au lieu de .test-both:-moz-placeholder(notez les deux points au lieu d'un seul).
Vous devez spécifier le sujet à plusieurs reprises parce que le navigateur interpretes de la règle. Les propriétés comme:- webkit ne peut pas être trouvé dans Firefox. Ainsi, l'ensemble de la ligne est affichée comme une erreur.

OriginalL'auteur
9

Le problème est que Firefox modifier l'opacité du champ, et que vous pensez que c'est une couleur différente, mais ce n'est pas " ajouter "opacity:1;" et cela fonctionnera exactement la même dans tous les navigateurs
```
input:-moz-placeholder {
    color: #999999;
    opacity: 1;
}

input::-moz-placeholder {
    color: #999999;
    opacity: 1;
}
```
résolu mon problème en FF, merci!!!!!
rien bro, j'ai perdu des heures à essayer de le comprendre
Wow, je n'aurais perdu un peu de temps sur ce - bravo!
m'a pris environ 1m avant que je prenne la différence, très subtil.

OriginalL'auteur

Comme une mise à jour ci-dessous une liste complète des espaces réservés, vous devez utiliser. :-moz est déconseillée dans les nouvelles versions de firefox.

Vous devez spécifier les règles plusieurs fois et ne peut pas les combiner sur une seule ligne. Cela est dû au fait que le navigateur va interpréter comme un sélecteur unique. Il va provoquer une erreur car Firefox ne sait pas le webkit règle.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:#bbb;
  font-family: 12px Verdana, Arial,Tahoma, sans-serif;
  font: normal;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}

OriginalL'auteur

0

Vider votre cache de firefox (il peut être suffisant).

et inspecter avec firebug

installer firebug si c'est pas déjà fait https://addons.mozilla.org/en-US/firefox/addon/firebug/

clic droit sur l'entrée et cliquez sur Inspecter l'Élément avec Firebug.

pour voir s'il existe une propriété css avec une priorité plus élevée.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.