Pourquoi Firefox coupe-t-il le texte dans mon & lt; input type = "text" / & gt ;?

J'ai un simple <input type="text"/> de style avec les éléments suivants:

font-size:1.5em;line-height:1.5em;padding:.6em .4em;

Il affiche parfaitement normalement dans Chrome, Safari (c'est à dire les navigateurs Webkit).

Cependant, nous arrivons à Firefox, et ce qui se passe:

Pourquoi Firefox coupe-t-il le texte dans mon & lt; input type =

Comme vous pouvez le voir, Firefox décide de couper la taille de la police à une certaine hauteur. Pourquoi est-ce arrivé? Ce problème se produit même si j'ai retirer le rembourrage de la <input>.

Remarque:

Il peut être utile de savoir que l'ajout des styles appliqués à cette entrée sont les styles par défaut utilisé par Twitter Bootstrap v. 2.0.

Voici un JSFiddle, avec exactement le problème, je vais décrire:

http://jsfiddle.net/xxepX/

source d'informationauteur element119 | 2012-03-28

  1. 12

    Essayez d'augmenter votre hauteur de la ligne de propriété. Ce serait restreindre la zone visible pour les lettres à l'origine à être coupé. Firefox le moteur de rendu de rend hauteur de la ligne légèrement différente.

  2. 6

    Cela m'a aidé dans un cas similaire:

    input.with-fancy-styling {
    box-sizing: content-box;
}
  3. 2

    J'ai eu ce problème aussi, et je voulais partager mon fix.

    Tout d'abord, assurez-vous d'avoir le bon doctype, comme suit:

    <!DOCTYPE html>
    <html lang="en">

    Même avec qui j'étais mineur de couper le bas-de-casse j, g, et de y.

    J'ai inspecté et trouvé ce style sur le .form-control classe:

    .form-control {
    /* other styles omitted for brevity */
    height: 30px;
    padding: 6px 12px;
}

    Parce que c'est à l'aide de border-box boîte de dimensionnement, et je ne voulais pas une grande boîte, j'ai tout simplement a remplacé le style de ma propre feuille de style et réduit le rembourrage:

    .form-control {
    padding: 5px 12px;
}

    Et il a résolu le problème.

  4. 1

    Salut vous n'avez pas besoin de définir la hauteur de votre balise d'entrée de la classe ou de donner de la hauteur:auto; dans votre balise d'entrée de la classe

    ou voir le live de la démo:-

    http://jsfiddle.net/xxepX/2/

    Mis à JOUR

    veuillez vérifier votre mise à jour de css, j'ai ajouté la hauteur de la ligne & hauteur dans votre css et enlevé le rembourrage.

    .huge-form input, .huge-form button{
    font-size:1.5em;padding:0;
    line-height:31px;
    height:31px;
}

    ou vous pouvez voir la démo:- http://jsfiddle.net/xxepX/5/

  5. 0

    J'ai aussi essayé la technique de plus en plus 'line-height'. Mais il rend le texte est trop long en hauteur. En remplaçant 'line-height' avec 'hauteur' résolu mon problème en FF et chrome, sans en faire trop long en hauteur.

  6. -1

    Avec css, vous ne devez pas utiliser padding pour une zone de saisie pour l'indentation utilisation text-indent à la place.