et - Retrouvez les réponses et les commentaires concernant cette question" />
Dev Faq
10
votes

Modèle de boîte inconsistant entre et

J'ai réalisé que a un modèle Boîte Boîte, alors que a un modèle de boîte de contenu boîte. Ce comportement est présent dans IE8 et FF. Malheureusement, cela m'empêche d'appliquer ce style pour de belles entrées de taille uniforme: xxx

est ce comportement correct par IE et FF? Et existe-t-il un moyen de navigateur croisé autour de ce problème?

1 commentaires

C'est aussi le cas avec Chrome, alors je pense que ce comportement doit être supposé la SLA "par conception". Chrome montre que c'est "styles d'agent utilisateur" dans le débogueur, il dit: entrée: non ([type = "image"]), Textarea - Bordure-box

4 Réponses :

1
votes

Vous avez deux options pour résoudre ce problème 1) Si vous écrivez le code CSS pour l'entrée, il s'applique à chaque élément d'entrée.Instead d'utiliser cela pour l'une d'entre eux, il suffit de faire des types spécifiques xxx

2), j'utilise toujours des déclarations de classe Après avoir réinitialisé les noms de balises connus. xxx

et l'utiliser comme xxx

J'espère que cela vous aide.

0 commentaires
17
votes

est ce comportement correct par IE et FF?

Ce n'est pas vraiment énoncé dans la norme de fonctionnement des décorations de terrain contrôlées par CSS. À l'origine, ils ont été mis en œuvre en tant que widgets OS, auquel cas la taille de la boîte de frontière aurait un sens. Les navigateurs ultérieurs ont émigré pour rendant les widgets eux-mêmes utilisant des bordures / remplissage de CSS / etc., auquel cas le dimensionnement de la boîte de contenu aurait un sens. Certains navigateurs (c.-à-d.) Rendez des champs de formulaire en tant que mélange de deux, ce qui signifie que vous pouvez vous retrouver avec des cases de sélection, ce qui ne vous doublez pas avec des champs de texte.

et y a-t-il un navigateur croisé autour de ce problème?

À propos du meilleur que vous puissiez faire est de dire au navigateur que vous avez la dimensionnement que vous souhaitez manuellement à l'aide de CSS3: xxx

(ne fonctionnera pas sur IE6 / 7, ou IE8 lorsqu'il est en mode bizarre ou compatibilité.)

2 commentaires

Ie 6/7/8 en mode Quirks utilise le modèle de boîte à bordure de toute façon.

Donc, nous sommes venus du cercle complet. Il est pris 17 ans d'Internet Explorer Quiirks Mode Bashing; Mais nous retournons au modèle Netscape d'origine soupir

0
votes

Il y a un CSS uniquement corrigé pour celui-ci xxx

merci Muhammad Atif Chughtai

1 commentaires

Aujourd'hui, vous n'avez plus besoin de déranger avec des tours de rembourrage car les navigateurs concernés comprennent la balise de la boîte de taille. Vous pouvez spécifier une boîte à bordure et une boîte de contenu pour déclarer quel modèle vous voulez. Il vous suffit de garder à l'esprit que l'entrée (sauf type = image) et textarea sont la boîte de frontière par défaut.

0
votes

J'ai utilisé cette solution CSS pour obtenir un bouton identique et des hauteurs de texte; Cela fonctionne dans IE, FF et Chrome. Fondamentalement, l'idée est de forcer la hauteur des éléments d'entrée à plus grande que la hauteur de la boîte par défaut. Faites ceci pour le texte et le bouton:

  • Définir des marges et un rembourrage sur 0. Cela donne la plus petite boîte possible "naturelle".
  • Set vertical-aligner au milieu. Cela compense le rembourrage = 0 pour obtenir des espaces blanche au-dessus de / ci-dessous du texte.
  • Utilisez la hauteur / la largeur pour contrôler les dimensions du texte et du bouton. La hauteur de texte doit comporter plusieurs pixels supérieurs à la hauteur de la police (pour remplacer les dimensions de la boîte par défaut). La hauteur du bouton doit être de 2 pixels supérieurs au texte (en raison de différences entre les modèles de texte et de boîte de boutons).

    Exemple: xxx

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components