火狐和谷歌兼容性問題示例探討
發(fā)布時(shí)間:2014-02-24 11:27:09 作者:佚名
我要評論
關(guān)于火狐和谷歌兼容性問題,是從事前端必須要應(yīng)付的,下面有個(gè)不錯(cuò)的示例,大家可以參考下
復(fù)制代碼
代碼如下:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
body {
margin: 0;
padding:0;
background: #ccc;
}
#wrap {
width:290px;
margin:17% auto;
}
#sid {
width: 152px;
margin-left: -5px;
}
#sub {
margin-left: 65px;
}
#res {
margin-left: 55px;
}
#vcode{
float:right;
}
</style>
</head>
<body>
<div id="wrap">
<form action="loginok.php" method="post">
選 擇: <select name="loginname" id="sid">
<option value="admin">管理員</option>
<option value="user">用戶</option>
</select>
用戶名:<input type="text" name="username" id="">
密 碼:<input type="password" name="password" id="">
驗(yàn)證碼:<input type="text" name="" id=""><img src="vcode.php" id="vcode">
<input type="submit" value="login" id="sub">
<input type="reset" value="reset" id="res">
</form>
</div>
</body>
</html>
谷歌瀏覽器下:

火狐瀏覽器下:

查看了一下,編碼方式都為utf-8。
查了查google,有這么一句話:
"保存成UTF8編碼的文件時(shí),半角空格占用1個(gè)字節(jié),全角空格占用3個(gè)字節(jié)";看完后,有點(diǎn)糊涂,求大神解惑,還有就是出現(xiàn)這種情況什么? 在火狐和谷歌瀏覽器下占的字節(jié)不一樣嗎?解決了字體無法對齊:http://www.aiisen.com/html-utf-8-blank-zh.html但是下邊兩個(gè)按鈕和下拉框還是存在問題在火狐下,Inptu標(biāo)簽貌似自動(dòng)換行了,加上自身寬度,算了算,并沒有超了wrap的寬度。
火狐下:
瀏覽器緩存也給清過了。
相關(guān)文章
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-12-16新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2020-11-30css hack之\9和\0就可能對hack IE11\IE9\IE8無效
每次設(shè)計(jì)一張網(wǎng)頁或一個(gè)表單,都被各種瀏覽器的兼容問題傷透腦筋,尤其是IE家族。在做兼容性設(shè)計(jì)時(shí),我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語法進(jìn)行hack,從而達(dá)到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20
這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-02-28
這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-20
這篇文章主要介紹了border-radius IE8兼容處理的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-02-12- 這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問題,詳細(xì)的介紹了幾種我遇到的問題和解決方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-14
對常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-20






