recherche
Maisoninterface Webtutoriel HTML在chrome下不能显示displayblock或者inlineblock的元素怎么办?

在chrome下不能正常显示一个display: inline-block或者display: block的元素怎么办 
 DEMO页面只有一个输入框,当输入框有焦点时高度变大,并且显示 字数显示和回复按钮。 
 现在问题是,chrome只能在第一次刷新之后点击输入框然后高度变大并显示 字数显示和回复按钮的元素,但是再点击第二次输入框就只有高度变大,却没有看到字数显示和回复按钮的元素了(firefox正常) 

<head>
<meta charset="UTF-8">
<title>案例:人人网评论功能</title>
<style>.comment-input{width: 450px;}.input-area{outline: 0;border: 1px solid black;width:446px;height: 15px;}.input-area_expand{height: 45px;}.input-action{display: none;}.input-action_show{height: 26px;width: 102px;display: inline-block;
//这里display: block都试过了,只能在第一次刷新的时候看到,再点击第二次输入框就看不到了float: right;}
</style></head><body><p class="comment-input" style="border:1px solid red">
<textarea class="input-area"   >
评论……</textarea><p class="input-action" style="border:1px solid red"><span class="inputed">0</span>/<span class="maxlength">140</span><a href="javascript:void(0)" class="reply-btn">回复</a></p></p></body>
//获取下一个兄弟元素节点function getNextElement(node)
{      if(node.nodeType == 1){          return node;      }      
if(node.nextSibling){          return getNextElement(node.nextSibling);      }      
return false;}   document.getElementsByClassName(&#39;input-area&#39;)[0].onfocus = function() 
{this.className = &#39;input-area input-area_expand&#39;var nextEl = getNextElement(this.nextSibling);
nextEl.className = &#39;input-action input-action_show&#39;;this.value = &#39;&#39;;
console.log(&#39;focus:&#39;+nextEl.className)}document.getElementsByClassName(&#39;input-area&#39;)[0].onblur = function() {var nextEl = getNextElement(this.nextSibling);nextEl.className = &#39;input-action&#39;;this.className = &#39;input-area&#39;this.value = &#39;评论……&#39;;console.log(&#39;blur :&#39;+nextEl.className);}

以上就是在chrome下不能显示displayblock或者inlineblock的元素怎么办?,更多请关注php中文网其它相关文章!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Quel est le but des balises HTML?Quel est le but des balises HTML?Apr 28, 2025 am 12:02 AM

Htmltagsaressentialforstructuringwebpages, amélioration accessibilité, référence

Que sont les balises d'auto-fermeture? Donner un exemple.Que sont les balises d'auto-fermeture? Donner un exemple.Apr 27, 2025 am 12:04 AM

Self-Flaytagsinhtmlandxmlaretagsthatrechy-sey-sey -thout neweding aparateclosingtag, simplifier laMarkupTructureAnhancingCodingEfficiency.1) TheyAssentialInxmlForeLementswithoutContent, assurantwell-formedDocuments.

Au-delà de HTML: technologies essentielles pour le développement WebAu-delà de HTML: technologies essentielles pour le développement WebApr 26, 2025 am 12:04 AM

Pour créer un site Web avec des fonctions puissantes et une bonne expérience utilisateur, HTML seul ne suffit pas. La technologie suivante est également requise: JavaScript donne la dynamique et l'interactivité de la page Web, et les modifications en temps réel sont réalisées par DOM opération. CSS est responsable du style et de la disposition de la page Web pour améliorer l'esthétique et l'expérience utilisateur. Des cadres et des bibliothèques modernes tels que React, Vue.js et Angular améliorent l'efficacité du développement et la structure de l'organisation du code.

Quels sont les attributs booléens en HTML? Donnez quelques exemples.Quels sont les attributs booléens en HTML? Donnez quelques exemples.Apr 25, 2025 am 12:01 AM

Les attributs booléens sont des attributs spéciaux en HTML qui sont activés sans valeur. 1. L'attribut booléen contrôle le comportement de l'élément par le fait qu'il existe ou non, comme les désactivés désactiver la boîte d'entrée. 2. Le principe de travail consiste à changer le comportement des éléments en fonction de l'existence d'attributs lorsque le navigateur analyse. 3. L'utilisation de base consiste à ajouter directement des attributs, et l'utilisation avancée peut être contrôlée dynamiquement via JavaScript. 4. Les erreurs courantes pensent à tort que les valeurs doivent être définies, et la bonne méthode d'écriture devrait être concise. 5. La meilleure pratique consiste à garder le code concis et à utiliser raisonnablement les propriétés booléennes pour optimiser les performances de la page Web et l'expérience utilisateur.

Comment pouvez-vous valider votre code HTML?Comment pouvez-vous valider votre code HTML?Apr 24, 2025 am 12:04 AM

Le code HTML peut être plus propre avec des validateurs en ligne, des outils intégrés et des processus automatisés. 1) Utilisez W3CMarkUpValidations Service pour vérifier le code HTML en ligne. 2) Installez et configurez l'extension htmlhint dans VisualStudiocode pour une vérification en temps réel. 3) Utilisez HTMLTIDY pour vérifier et nettoyer automatiquement les fichiers HTML dans le processus de construction.

HTML vs CSS et JavaScript: Comparaison des technologies WebHTML vs CSS et JavaScript: Comparaison des technologies WebApr 23, 2025 am 12:05 AM

HTML, CSS et JavaScript sont les technologies de base pour la création de pages Web modernes: 1. HTML définit la structure de la page Web, 2. CSS est responsable de l'apparence de la page Web, 3. JavaScript fournit une dynamique de page Web et une interactivité, et ils travaillent ensemble pour créer un site Web avec une bonne expérience d'utilisation.

HTML comme un langage de balisage: sa fonction et son objectifHTML comme un langage de balisage: sa fonction et son objectifApr 22, 2025 am 12:02 AM

La fonction de HTML est de définir la structure et le contenu d'une page Web, et son objectif est de fournir un moyen standardisé d'afficher des informations. 1) HTML organise différentes parties de la page Web via des balises et des attributs, tels que des titres et des paragraphes. 2) Il soutient la séparation du contenu et des performances et améliore l'efficacité de maintenance. 3) Le HTML est extensible, permettant aux balises personnalisées d'améliorer le référencement.

L'avenir de HTML, CSS et JavaScript: Tendances de développement WebL'avenir de HTML, CSS et JavaScript: Tendances de développement WebApr 19, 2025 am 12:02 AM

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)