chromeでdisplayblock要素やinlineblock要素が表示できない場合はどうすればよいですか?-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

chromeでdisplayblock要素やinlineblock要素が表示できない場合はどうすればよいですか?

PHP中文网

Jun 06, 2017 am 09:24 AM

display:inline-block または display:block 要素が Chrome で正常に表示されない場合はどうすればよいですか?
DEMO ページには入力ボックスが 1 つしかありませんが、入力ボックスにフォーカスがあると、高さが大きくなり、文字数が増加します。表示と返信ボタンが表示されます。
現在の問題は、Chrome が最初の更新後にのみ入力ボックスをクリックすると高さが増加し、単語数の表示と返信ボタンの要素が表示されることですが、入力ボックスを 2 回目にクリックすると、高さのみが増加します。ただし、文字数は表示されません。表示ボタンと返信ボタンの要素は表示されます (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 中国語 Web サイトの他の関連記事に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7677

CakePHP チュートリアル

1393

C# チュートリアル

1207

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

Windows 11/10のUpdater.exeとは何ですか?これはChromeのプロセスですか? Mar 21, 2024 pm 05:36 PM

Windows 上で実行するすべてのアプリケーションには、それを更新するためのコンポーネントプログラムがあります。したがって、Google Chrome または Google Earth を使用している場合は、GoogleUpdate.exe アプリケーションが実行され、アップデートが利用可能かどうかが確認され、設定に基づいてアップデートされます。ただし、Windows 11/10 のタスクマネージャーにプロセス updater.exe が表示されなくなり、代わりにプロセス updater.exe が表示される場合は、これには理由があります。 Windows 11/10のUpdater.exeとは何ですか? Googleは、Google Earth、Google Drive、Chromeなどのすべてのアプリのアップデートを公開しました。このアップデートにより、

crdownloadとは何のファイルですか? Mar 08, 2023 am 11:38 AM

crdownload は、Chrome ブラウザのダウンロードキャッシュファイルで、ダウンロードされていないファイルです。crdownload ファイルは、ハードディスクからダウンロードされたファイルを保存するために使用される一時ファイル形式です。ユーザーがファイルをダウンロードする際にファイルの整合性を保護し、ファイルの破損を回避するのに役立ちます。 . 予期せぬ中断または停止。 CRDownload ファイルはファイルのバックアップにも使用でき、ユーザーはファイルの一時コピーを保存できます。ダウンロード中に予期しないエラーが発生した場合、CRDownload ファイルを使用してダウンロードしたファイルを復元できます。

Chrome がプラグインを読み込めない場合の対処方法 Nov 06, 2023 pm 02:22 PM

Chrome でプラグインを読み込めない場合は、プラグインが正しくインストールされているかどうかの確認、プラグインの無効化と有効化、プラグインのキャッシュのクリア、ブラウザとプラグインの更新、ネットワーク接続の確認、およびシークレットモードでプラグインをロードしようとしています。解決策は次のとおりです: 1. プラグインが正しくインストールされているかどうかを確認し、再インストールします。 2. プラグインを無効にしてから有効にし、[無効] ボタンをクリックして、もう一度 [有効] ボタンをクリックします。 3. プラグインをクリアします。 - キャッシュで、[詳細オプション] > [閲覧データのクリア] を選択し、キャッシュの画像とファイルを確認してすべての Cookie をクリアし、[データのクリア] をクリックします。

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか? Mar 08, 2024 am 08:55 AM

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか?通常の状況では、Chrome プラグイン拡張機能のデフォルトのインストールディレクトリは次のとおりです。 1. WindowsXP での Chrome プラグインのデフォルトのインストールディレクトリの場所: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Windows7 の chrome プラグインのデフォルトのインストールディレクトリの場所: C:\Users\username\AppData\Local\Google\Chrome\User

Google ChromeでWebページが開けない問題の解決方法 Jan 04, 2024 pm 10:18 PM

Google Chrome Web ページが開けない場合はどうすればよいですか? Google Chrome を使用するのが好きな友人はたくさんいますが、もちろん、Web ページが正常に開けない、または使用中に Web ページが開くのが非常に遅いと感じる友人もいます。 Google ChromeのWebページがエディタで開けない問題の解決策を見てみましょう。 Google Chrome Webページが開けない問題の解決方法方法 1. まだレベルをクリアしていないプレイヤーを助けるために、パズルを解くための具体的な方法について学びましょう。まず、右下のネットワークアイコンを右クリックし、「ネットワークとインターネットの設定」を選択します。 2. [イーサネット] をクリックし、[アダプターオプションの変更] をクリックします。 3. 「プロパティ」ボタンをクリックします。 4. ダブルクリックして開きます。

クロムってどういう意味ですか Aug 07, 2023 pm 01:18 PM

Chrome とは、ブラウザを意味します。Google が開発した Web ブラウザです。2008 年に初めてリリースされ、すぐに世界で最も人気のあるブラウザの 1 つになりました。その名前は、その象徴的なブラウザのインターフェイスデザインに由来しています。特徴は、ブラウザのタブバーです。このタブバーの外観は、クロムメタルに非常に似ています。

Chrome と Edge のすべてのタブでテキストを検索する方法 Feb 19, 2024 am 11:30 AM

このチュートリアルでは、Windows の Chrome または Edge で開いているすべてのタブで特定のテキストまたは語句を検索する方法を説明します。 Chrome で開いているすべてのタブでテキスト検索を行う方法はありますか?はい。Chrome で無料の外部 Web 拡張機能を使用すると、タブを手動で切り替えることなく、開いているすべてのタブでテキスト検索を実行できます。 TabSearch や Ctrl-FPlus などの一部の拡張機能を使用すると、これを簡単に実現できます。 Google Chrome のすべてのタブでテキストを検索するにはどうすればよいですか? Ctrl-FPlus は、ユーザーがブラウザウィンドウのすべてのタブで特定の単語、語句、またはテキストを簡単に検索できるようにする無料の拡張機能です。この展開は

chromesetupとはどのようなソフトウェアですか? Mar 03, 2023 pm 02:58 PM

chromesetup は Google ブラウザのインストールプログラムです。Google Chrome は Google によって開発されたシンプルで効率的な Web ブラウジングツールです。シンプルさとスピードが特徴です。Chrome はマルチタブブラウジングをサポートしており、各タブページは独立した「サンドボックス」で実行されています。セキュリティが向上し、1 つのタブページがクラッシュしても他のタブページが閉じられることはありません。

See all articles