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

バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp Web ページに統合すると、奇妙な現象が発生しました。

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

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

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

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