ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決
|
バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp Web ページに統合すると、奇妙な現象が発生しました。 相手からHTMLファイルが提供され、それを開いてみると、表示されるスタイルは正常でした。その後、コードを jsp ページにコピーしたところ、奇妙な現象が発生しました。これは、ユーザー名入力ボックスとパスワード入力ボックスを含むログイン ページです。 Web ページを Web サーバーに展開し、ブラウザーで開くと、2 つの入力ボックスのスタイルが失われていることがわかります。 2 つの入力ボックスの名前属性が同じ名前に設定されている場合にのみ、スタイルを正常に表示できます。 Chrome プラグインで確認したところ、対応するスタイルはあるものの、ブラウザで表示すると無効となり、WebKit 付属のスタイルに置き換えられてしまいます。ただし、他のマシンで同じバージョンのブラウザを使用して開く場合は問題ありません。最終的に、Web 開発に詳しい同僚が原因を突き止めるのに協力してくれました。ローカル マシンでテストしたときに、このログイン ページのユーザー名とパスワードをブラウザーに保存していたためです。このページを開くと、Chrome がユーザー名とパスワードを自動的に入力し、Web ページのスタイルを Webkit のデフォルト スタイルに置き換えました。これは、自動的に入力されたフォーム コンテンツであることをユーザーに知らせるための黄色の背景の入力ボックスです。 Chrome によって保存されたこの Web ページのユーザー名とパスワードを消去するだけです。 |
<<: 円形グラデーションプログレスバー効果を実現する CSS サンプルコード
>>: さまざまなReact状態マネージャーの解釈と使用方法
推薦する
MySQL トリガーの基本的な使い方（作成、表示、削除など）の詳細な説明
目次1. MySQLトリガーの作成: 1. MySQLトリガー作成構文: 2. MySQL作成構文の...
IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル
1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...
5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます
目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...
MySQL がユーザー名とパスワードの漏洩を引き起こす可能性のある Riddle の脆弱性を公開
MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...
ウェブ クラスターの Docker Stack 展開方法の手順
Docker はますます成熟し、その機能もますます強力になっています。 Docker Stack を...
MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?
序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...
three.js を使用してクールなアシッドスタイルの 3D ページ効果を実現します
この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み...
Windows 64 ビットに MySQL を再インストールするチュートリアル (Zip バージョン、解凍バージョンの MySQL インストール)
MySQLをアンインストールする1. コントロールパネルで、MySQLのすべてのコンポーネントをア...
バックエンド サーバー プロキシとして Nginx を推奨する理由 (理由分析)
1. はじめに実際のサーバーはパブリックインターネットに直接公開されるべきではありません。そうしな...
js でパズルゲームを実装する
この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...
HTMLのタグについての簡単な説明
0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...
nginx で仮想ホストを構成するための詳細な手順
仮想ホストは、インターネット上で実行されているサーバー ホストを複数の「仮想」ホストに分割する特殊な...
http-proxy-middlewareを使用してNodeでプロキシクロスドメインを実装する方法と手順
目次1. プロキシモジュールをインストールする2. プロキシを設定する1. プロキシモジュールをイン...
CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する
1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...
LinuxでVIMエディタを使う方法
豊富なオプションを備えた強力なエディターとして、Vim は多くのユーザーに愛されています。この記事で...