瀏覽器自動(dòng)填充表單導(dǎo)致網(wǎng)頁樣式丟失原因分析及解決

2024-08-30 08:35:14

字體：大中小

供稿：網(wǎng)友

從后臺(tái)做到前端，悲劇啊。將別人做好的css集成到我的jsp網(wǎng)頁里面，出現(xiàn)了一個(gè)奇怪現(xiàn)象。

對(duì)方提供給我的是html文件，打開之后樣式顯示都正常。我再把里面的代碼復(fù)制到我的jsp頁面，奇怪的現(xiàn)象就出現(xiàn)了。這是一個(gè)登陸頁面，包括用戶名輸入框和密碼輸入框。將網(wǎng)頁部署到Web服務(wù)器上，通過瀏覽器打開發(fā)現(xiàn)這兩個(gè)輸入框的樣式丟了。只有將兩個(gè)輸入框的name屬性設(shè)為相同的名字才能正常顯示樣式。

通過chrome的插件查看發(fā)現(xiàn)有對(duì)應(yīng)的樣式，但是在瀏覽器顯示的時(shí)候這些樣式就失效了，被webkit自帶的樣式給代替了。而在其他機(jī)子上用相同版本的瀏覽器打開卻沒問題。最后一個(gè)熟悉web開發(fā)的同事幫忙找到了原因，是由于我之前在本機(jī)上測(cè)試的時(shí)候在瀏覽器保存了這個(gè)登陸頁面的用戶名密碼，在打開這個(gè)頁面的時(shí)候chrome自動(dòng)填充用戶名密碼，同時(shí)用webkit默認(rèn)樣式替代網(wǎng)頁樣式，就是一個(gè)黃色背景的輸入框，以提示用戶這是自動(dòng)填充的表單內(nèi)容。把chrome保存的這個(gè)網(wǎng)頁的用戶名密碼清掉就可以了。

上一篇：網(wǎng)頁css優(yōu)先級(jí)為您詳細(xì)解讀

下一篇：把網(wǎng)頁變成黑白(兼容谷歌、火狐、ie等瀏覽器)