ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決

ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決
バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp Web ページに統合すると、奇妙な現象が発生しました。

相手からHTMLファイルが提供され、それを開いてみると、表示されるスタイルは正常でした。その後、コードを jsp ページにコピーしたところ、奇妙な現象が発生しました。これは、ユーザー名入力ボックスとパスワード入力ボックスを含むログイン ページです。 Web ページを Web サーバーに展開し、ブラウザーで開くと、2 つの入力ボックスのスタイルが失われていることがわかります。 2 つの入力ボックスの名前属性が同じ名前に設定されている場合にのみ、スタイルを正常に表示できます。

Chrome プラグインで確認したところ、対応するスタイルはあるものの、ブラウザで表示すると無効となり、WebKit 付属のスタイルに置き換えられてしまいます。ただし、他のマシンで同じバージョンのブラウザを使用して開く場合は問題ありません。最終的に、Web 開発に詳しい同僚が原因を突き止めるのに協力してくれました。ローカル マシンでテストしたときに、このログイン ページのユーザー名とパスワードをブラウザーに保存していたためです。このページを開くと、Chrome がユーザー名とパスワードを自動的に入力し、Web ページのスタイルを Webkit のデフォルト スタイルに置き換えました。これは、自動的に入力されたフォーム コンテンツであることをユーザーに知らせるための黄色の背景の入力ボックスです。 Chrome によって保存されたこの Web ページのユーザー名とパスワードを消去するだけです。

<<:  円形グラデーションプログレスバー効果を実現する CSS サンプルコード

>>:  さまざまなReact状態マネージャーの解釈と使用方法

推薦する

Linux CentOS 7.7 システムの VMware インストールに関する詳細なチュートリアル

Linux CentOS 7.7 システムを Vmware にインストールする方法。最小限のインスト...

Dockerにelasticsearchとkibanaをインストールする方法

Elasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを知らないと軽蔑...

MySQLの一般的なバックアップコマンドとシェルバックアップスクリプトの共有

複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...

HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...

js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...

Vue3.0のさまざまなリスニング方法の包括的な概要

目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

Linux の運用と保守で netstat の代わりに ss コマンドを使用する方法

序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...

Centos8環境でSSHポート番号を変更する方法

目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...

MySQLにおけるMTRの概念

MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...

HTML の 5 種類のスペースの意味

HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...

Vueはプルダウンを実装してさらに読み込む

Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...

Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...

MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...

MySQL のダウンロードとインストールの詳細グラフィックチュートリアル

1. MySQLデータベースをダウンロードするには、公式Webサイトにアクセスしてください:http...