Rembourrage supplémentaire dans & lt; input type = "text" & gt;

Il semble que chaque navigateur ajoute un peu de magie codé en dur rembourrage à l'intérieur de <input type="text">. Certains navigateurs (IE, Safari, Chrome) faire de la zone d'entrée un peu plus grand, mais ils correctement top aligner comme si elle était un élément HTML. Je peux vivre avec la hauteur supplémentaire. Mais certains navigateurs se conduisent mal (Firefox et Opera) et aussi essayer de les aligner verticalement le texte ou ajouter un peu de rembourrage supplémentaire au-dessus d'elle. Je suis surpris que les navigateurs modernes ne permettent pas à la disposition de zones de texte, comme si elles de la même manière que le HTML et ajouter un peu de magie de mise en forme. Suis-je en train de faire quelque chose de mal? Ai-je raté une astuce? Sont-ils certains de propriété des propriétés CSS qui pourrait m'aider? J'ai brièvement regardé Firefox CSS de la documentation, mais je ne pouvais pas trouver tout. Sinon, je pourrais utiliser modifiable HTML au lieu de <input type="text">.

Voici un extrait qui illustre le problème:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <title>Test</title>

    <style type="text/css">

        body, input {
            font-family: sans-serif;
            font-size: 16pt;
            color: White; }

        #textbox {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 100px;
            background-color: #A5C9E2;
            line-height: 16pt;
            padding: 0px;
            margin: 0px;
            border-width: 0px; }

        #box {
            position: absolute;
            left: 120px;
            top: 20px;
            width: 100px;
            background-color: #AFD66A;
            line-height: 16pt; }

    </style>

</head>
<body>

    <input type="text" id="textbox" value="Hello">

    <div id="box">Hello</div>

</body>
</html>

Edit: j'ai expérimenté un peu avec -moz-outline et -moz-box-sizing dans Firefox (au cas où), mais aucun de leurs valeurs supprime le rembourrage supplémentaire.

source d'informationauteur Jan Zich

  1. 9

    Vous pouvez éliminer ce rembourrage supplémentaire par la modification de la zone de la taille de l'entrée. 

    -moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

    Il rend les navigateurs modernes ont le même comportement. Vous pourriez avoir besoin pour cible IE spécifiquement.

  2. 3

    J'ai testé en changeant la hauteur de la ligne et de la police-les valeurs de la taille de 20px et ensuite d'inspecter l'élément avec Firebug. Le clientHeight et offsetHeight propriétés sont à la fois 24px (mais comme ces propriétés comprennent tout rembourrage fixé sur l'élément que je ne suis pas sûr si c'est le navigateur de l'expansion de la hauteur d'élément, ou l'ajout de remplissage).

    Explicitement réglage de la hauteur de l'entrée pour être la même que la hauteur de la ligne ne semble faire ce que vous voulez, c'est à dire line-height: 16pt; height: 16pt; - mais je suppose qu'il fonctionne en coupant l'élément, comme la position verticale du texte à l'intérieur de l'entrée ne change pas.