整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在IE、FireFox、等不同的瀏覽器里，對于.body的、 和 有著不同的含義.
：在上述瀏覽器中, 的含義是一致的，定義為網頁內容可視區域的高度，即在瀏覽器中可以看到網頁內容的高度，通常是工具條以下到狀態欄以上的整個區域高度，與具體的網頁頁面內容無關。可以理解為，在屏幕上通過瀏覽器窗口所能看到網頁內容的高度。
：關于，ie和firefox等不同瀏覽中意義有所不同，需要加以區別。在ie中， 的取值為 加上滾動條及邊框的高度；而firefox、中，其取值為是實際網頁內容的高度，可能會小于。
：都表示瀏覽器中網頁內容的高度，但稍有區別。在ie里為實際網頁內容的高度，可以小于 ；在firefox 中為網頁內容高度，最小值等于 ，即網頁實際內容比時，取。
、 和 的含義與上述內容雷同，不過是高度變成寬度而已。
標準的事件綁定方法函數為，但IE下是事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，但是最后的結果是將IE的標準定為標準我們常說的事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。并且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.在低版本的IE中獲取的日期處理函數的值不是與1900的差值，但是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值
比如：var year= new Date().getYear();
解決
//方式一
var year= new Date().getYear();
year = (year .write(year);
//方式二
var year = new Date().();
.write(year);
的使用
分析原因:FF不支持，它支持來實現，不過沒有像一樣考慮元素的 display方式，所以不完全與IE兼容。如果不用，字符串里面不包含HTML代碼也可以用代替。Safari和Chrome對和都支持
兼容處理
通過判斷不同瀏覽器做不同的處理
if(.all){
document.getElementById('element').innerText = "mytext"; } else{
document.getElementById('element').textContent = "mytext"; Frame的引用
IE可以通過id或者name訪問這個frame對應的window對象；而FF只可以通過name來訪問這個frame對應的window對象。
【應用場景】
在一個頁面嵌套了一個iframe頁面(下面簡稱父頁面和子頁面)。父頁面取子頁面的值。
Js代碼
此時如果父頁面想獲取子頁面例如div中的顯示值，IE下可以這樣寫：
var obj = ...(div_id);
alert(obj.);
但是在FF中卻無法取子頁面中的值，原因就是FF只支持.來訪問子頁面中的window對象。所以在IE、safari中是支持通過或是frameId來訪問子頁面window對象的。
解決方法：
1、盡量都是用去訪問子頁面window對象。
2、在FF、IE、Safari中都支持window..(frameId)來獲得子頁面window對象。ajax的實現方式不同，這個我所理解的是獲取的不同，IE下是中不能操作tr的獲得DOM節點的父節點、子節點的方式不同
其他瀏覽器： .
IE： .
鍵盤事件 keyCode 兼容性寫法
var inp = document.getElementById('inp')
var result = document.getElementById('result')
function getKeyCode(e) {
e = e ? e : (window.event ? window.event : "")
return e.keyCode ? e.keyCode : e.which
}
inp.onkeypress = function(e) {
result.innerHTML = getKeyCode(e)
}
求窗口大小的兼容寫法
// 瀏覽器窗口可視區域大?。ú话üぞ邫诤蜐L動條等邊線）
// 1600 * 525
var = .. || .body.;
var = .. || .body.;
// 網頁內容實際寬高（包括工具欄和滾動條等邊線）
// 1600 * 8
var = .. || .body.;
var = .. || .body.;
// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）
// 1600 * 8
var = .. || .body.;
var = .. || .body.;
// 滾動的高度
var = ..||.body.;
DOM 事件處理程序的兼容寫法（能力檢測）
var = {
// event兼容
: (event) {
return event ? event : window.event;
},
// type兼容
getType: (event) {
return event.type;
},
// target兼容
: (event) {
return event.target ? event.target : event.srcelem;
},
// 添加事件句柄
: (elem, type, ) {
if (elem.addEventListener) {
elem.addEventListener(type, listener, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, listener);
} else {
// 在這里由于.與'on'字符串不能鏈接，只能用 []
elem['on' + type] = listener;
}
},
// 移除事件句柄
: (elem, type, ) {
if (elem.removeEventListener) {
elem.removeEventListener(type, listener, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, listener);
} else {
elem['on' + type] = null;
}
},
// 添加事件代理
: (elem, type, agent, ) {
elem.addEventListener(type, function (e) {
if (e.target.matches(agent)) {
listener.call(e.target, e); // this 指向 e.target
}
});
},
// 取消默認行為
: (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止事件冒泡
: (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}};
集合類對象的()與[]的問題
IE下，可以使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。
Js代碼 ：
.write(.forms("").src);
//該寫法在IE下能訪問到Form對象的src屬性
解決辦法：將.forms("")改為 .forms[""]。統一使用[]獲取集合類對象。
對瀏覽器Native組件調用屬性、方法大小寫問題
IE：不區分大小寫
FF、Chrome：區分大小寫
如：Ajax返回的對象，IE支持.和；FF等瀏覽器支持.，解決辦
法只有在編寫程序時盡量避免不兼容的寫法HTML
解決 ie9 以下瀏覽器對 html5 新增標簽不識別的問題
.js
解決 ie9 以下瀏覽器不支持 CSS3 Media Query 的問題。
respond.js
.js
解決 IE 9 10 11 等瀏覽器不支持
標簽的問題
高版本的瀏覽器用了低版本的瀏覽器無法識別的元素，從而導致不能解析。這點主要體現在html5的新標簽上
框架可以讓低于IE9的瀏覽器支持的alt屬性，在圖片不存在的情況下，各瀏覽器的解析不一致
在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字ul標簽內外邊距問題
ul標簽在IE6IE7中，有個默認的外邊距，但是在IE8以上及其他瀏覽器中有個默認的內邊距
文字
文字
文字
IE的打印結果，有3個子節點，并且都為P元素；非IE則表現出極大的差異：居然打印出了7個子節點，當然也包括3個P元素子節點在內，除此之外還多了4個=3的子節點
改寫為：
文字
文字
文字
CSS
css重置不同瀏覽器的基礎樣式文件 .css
;>
不同瀏覽器的標簽默認的外補丁和內補丁不同
*{margin:0;padding:0;}css的hack問題：主要針對IE的不同版本，不同的瀏覽器的寫法不同
IE的條件注釋hack：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示 margin比設置的大，IE6中后面的一塊被頂到下一行
在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug,IE6里的間距比超過設置的間距
在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度
問題：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
給超出高度的標簽設置:hidden;或者設置行高line-height 小于你設置的高度
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。圖片默認有間距
使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距IE6下圖片的下方有空隙
給img設置display:block;IE6下兩個float之間會有個3px的bug
給右邊的元素也設置float:left;IE6下沒有min-width的概念，其默認的width就是min-width
min-height: 350px;
_height: 350px;標簽最低高度設置min-height不兼容
如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !; height:200px; :visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小于一個值（如300px）時。容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。IE6下在使用margin:0 auto;無法使其居中
為其父容器設置text-align:center;被點擊過后的超鏈接不再具有hover和active屬性
按lvha的順序書寫css樣式
link:平常的狀態
visited:被訪問過之后
hover:鼠標放到鏈接上的時候
active:鏈接被按下的時候在使用絕對定位或者相對定位后，IE中設置z-index失效，原因是因為其元素依賴于父元素的z-index，但是父元素默認為0， 子高父低，所以不會改變顯示的順序IE6下無法設置1px的行高，原因是由其默認行高引起的
為期設置:hidden;或者line-height:1px;瀏覽器 CSS 兼容前綴
-o-:rotate(7deg); // Opera
-ms-:rotate(7deg); // IE
-moz-:rotate(7deg); // Firefox
-webkit-:rotate(7deg); // Chrome
:rotate(7deg); // 統一標識語句
完美解決
" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name ';}">清除浮動 最佳實踐
.fl { float: left; }
.fr { float: right; }
.:after { display: block; clear: both; content: ""; : hidden; height: 0; }
. { zoom: 1; }
解決邊距重疊問題
當相鄰元素都設置了 margin 邊距時，margin 將取最大值，舍棄小值。為了不讓邊距重疊，可以給子元素加一個父元素，并設置該父元素為
: hidden;
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
IE9 以下瀏覽器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:..Alpha(style = 0, opacity = 50);
解決 IE6 不支持 fixed 絕對定位以及IE6下被絕對定位的元素在滾動的時候會閃動的問題
/* IE6 hack */html, html body {
background-image: url(about:blank);
background-attachment: fixed;*html #menu {
position: absolute;
top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');IE6 背景閃爍的問題
鏈接、按鈕用 作為背景，在 ie6 下會有背景圖閃爍的現象。原因是 IE6 沒有將背景圖緩存，每次觸發 hover 的時候都會重新加載
可以用 設置 ie6 緩存這些圖片
.("", false, true);解決在 IE6 下，列表與日期錯位的問題
日期 標簽放在標題 標簽之前即可
IE 條件注釋
IE 的條件注釋僅僅針對IE瀏覽器，對其他瀏覽器無效
IE 屬性過濾器（較為常用的hack方法）
針對不同的 IE 瀏覽器，可以使用不同的字符來對特定的版本的 IE 瀏覽器進行樣式控制
讓 IE7 IE8 支持 CSS3 -size屬性
由于 -size 是 CSS3 新增的屬性，所以 IE 低版本自然就不支持了，但是老外寫了一個 htc 文件，名叫 -size ，使用該文件能夠讓 IE7、IE8 支持 -size 屬性。其原理是創建一個 img 元素插入到容器中，并重新計算寬度、高度、left、top 等值，模擬 -size 的效果。
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('img/37.png');
background-repeat: no-repeat;
background-size: cover;
-ms-behavior: url('css/backgroundsize.min.htc');
behavior: url('css/backgroundsize.min.htc');
}
IE6-7 line-height 失效的問題
問題：在ie 中 img 與文字放一起時，line-height 不起作用
解決：都設置成 float加粗文字
width:100%
width:100% 這個東西在 ie 里用很方便，會向上逐層搜索 width 值，忽視浮動層的影響.
Firefox 下搜索至浮動層結束，如此，只能給中間的所有浮動層加 width:100%才行，累啊。
opera 這點倒學乖了，跟了 :hand
顯示手型 cursor: hand，ie6/7/8、opera 都支持，但是safari 、 ff 不支持
cursor: pointer;td 自動換行的問題
問題：table 寬度固定，td 自動換行
解決：設置 Table 為 table-layout: fixed，td 為 word-wrap: break-word讓層顯示在 FLASH 之上
想讓層的內容顯示在 flash 上，把 FLASH 設置透明即可
1、
2、
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
