IE 谷歌 火狐瀏覽器相容性 預設屬性樣式總結

2021-07-27 22:31:26 字數 1870 閱讀 5930

1、去掉input框中自動新增的 x 和 眼睛圖示

情境：在 ie 瀏覽器下的 input 框中，輸入內容時：

1、 type = text 會自動生成乙個 x。

2、 type = password 會自動生成乙個眼睛的圖示。

解決：有時為了保證瀏覽器之間的一致性，就需要將這個樣式取消掉

// 去掉ie input x 和 眼睛圖示


input::-ms-clear,::-ms-reveal
2、placeholder在 ie9 以下不相容解決：

可以將下面的**封裝到乙個方法或者乙個placeholder.js中單獨引入。

//   相容ie9的placeholder


function


isplaceholder


()if (!isplaceholder()) );


$(this).blur(function


());


}});


//對password框的特殊處理1.建立乙個text框 2獲取焦點和失去焦點的時候切換


$("input[type='password']").each(


function


() );


pwdfield.blur(function


() });


});}


});}
看了以下大概是這樣的：

1、  對於type = text的input框，是利用jquery新增placeholder屬性。

2、  對於type = password的input 框，新增乙個input type = text的輸入框，為其新增屬性placeholder,在對這兩個框做隱藏、顯示操作。

1、去掉谷歌瀏覽器中表單 input 框中的黃色背景，以及自動填充 user 和 password。

情境：

解決：

1、去掉黃色背景：
input


:-webkit-autofill


2、去掉自動填充：假密碼框 和 真密碼框 區分
id='passwordtxt'


name="userpassword"


type="text"


class="checkpass required"/>


id='password'


name="userpassword"


type="password"


class="checkpass required"


style="display: none"


readonly="true"/>
新增乙個同樣的 input 作預設顯示，type 為 text,這樣出來的時候就不會有預設填充了。正真的 input 密碼框則預設顯示display：none,並且readonly="true"設定唯讀模式。id 需要不同，需要 js 找到對應 dom 作操作。

新增js
$(function


ie6瀏覽器相容性
塊狀元素設定float 左浮動或有浮動 並且設定margin值之後，第乙個浮動的元素其左側margin值為正常的2倍，如圖，可以看到第乙個元素的左側邊距於其他元素兩兩之間的邊距一致，也就是其左邊距為正常邊距的兩倍 解決方法 給元素設定display inline即讓元素不為塊狀元素，如圖第乙個元素左...


瀏覽器相容性
瀏覽器相容性是乙個很長久的話題，之所以前端需要面對瀏覽器相容性，是因為使用者的環境有不同的平台，不同的瀏覽器。不同的廠商之間為了相互競爭，對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本，不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...


瀏覽器相容性
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...