[置頂] 個人總結


1、fixed支持ie7以上,relative、fixed、absolute支持width:100%;height:100%;


2、CSS中的RGBA、HSL、HSLA支持ie9以上瀏覽


3、直接給未聲明變量賦值在ie8以下會報錯
city = document.getElementById("input").value;//$("input[name='city']").val();
alert(city);


4、在ie8下在一個div中,有一個input元素,如果div及它的外層元素定義line-height時,如果input不設置line-height,可以會造成input距離div頂部之間有間距,大寫取決於line-height值的大小


5、<meta http-equiv="X-UA-Compatible" content="IE=8">
http-equiv顧名思義,相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。


6、當內聯內容溢出塊容器時,將溢出部分替換為(...)
overflow:hidden;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
text-overflow屬性值:
clip:當內聯內容溢出塊容器時,將溢出部分裁切掉。
ellipsis:當內聯內容溢出塊容器時,將溢出部分替換為(...)。


white-space屬性值:
normal:默認處理方式。
pre:用等寬字體顯示預先格式化的文本,不合並文字間的空白距離,當文字超出邊界時不換行。可查閱pre對象
nowrap:強制在同一行內顯示所有文本,合並文本間的多余空白,直到文本結束或者遭遇br對象。
pre-wrap:用等寬字體顯示預先格式化的文本,不合並文字間的空白距離,當文字碰到邊界時發生換行。
pre-line:保持文本的換行,不保留文字間的空白距離,當文字碰到邊界時發生換行。


7、獲取瀏覽器body的大小
// window.innerWidth 不支持ie8以下
// document.documentElement.clientWidth  在怪異模式下值為0
// document.body.clientWidth 支持 ie ff chrome
var width = document.body.clientWidth || document.documentElement.clientWidth || window.innerWidth;
var height = document.body.clientHeight || document.documentElement.clientHeight || window.innerHeight;


8、srcElement與target區別

獲得事件源的對象 IE:支持srcElement  FF:支持 target


9、toElement 與relatedTarget區別, IE支持 toElement   FF支持relatedTarget
場景:有二個div元素 div1和div2
假設給這二個div都綁定一個mouseout事件
如果從div1移動到div2時,div1中的event.relatedTarget得到的事件源是div2。
假設給這二個div都綁定一個 mouseover事件

如果從div1移動到div2時,div2中的event.relatedTarget得到的事件源是div1.


10、event.offsetX 與 event.layerX的區別  如果元素有滾動條的話,那么得到值是包含滾動條的滾動的高度
IE:event.offsetX和event.offsetY。
FF:event.layerX和event.layerY。

11、event.clientX和event.clientY 獲取的元素的坐標如果有滾動條,是不包含滾動條的高度.


12、input.type  ie:支持只讀 FF:支持讀寫


13、自定義標簽屬性
IE:支持 div.value 或 div["value"];
FF:支持div.attribute("value")

14、event事件 IE:支持window.event和event   FF:支持event


15、阻止冒泡 IE:支持event.cancelBubble = true; FF:支持event.stopPropagation();


16、阻止默認事件  IE:支持 return false.  FF:支持event.preventDefault();


17、綁定事件 IE:支持attacheEvent  FF:支持addEventListener


18、如何獲取CSS樣式兼容問題
IE:支持currentStyle["prop"];

FF:支持getComputedStyle(obj, false)["prop"];


19、如何獲取元素中的class屬性值
IE:支持div.className

FF:支持div.getAttribute("class");


20、IE和FF:支持document.getElementById()  IE8以上和FF都支持document.querySelector()


21、ie支持innerText FF支持textContent;


22、IE獲取的元素標簽名是大寫的,FF獲取的是小寫


23、獲取元素元素距上和左的距離 object.offsetTop  object.offsetLeft


23、阻止選中body中的文本兼容問題
IE:obj.onselectstart = function(){ return false }

FF:-moz-user-select:none;


24、獲取父元素兼容性

IE:支持ele.parentElement   FF:支持ele.parentNode


25、刪除元素兼容性問題
IE:支持element.removeNode(true)

FF:支持 element.parentNode.removeChild(element);


26、獲取子元素兼容性問題
IE:支持parentElement.children

FF:支持parentNode.childNodes


27、tagName與nodeName區別

tagName只能在HTML元素上獲取標簽名  nodeName在HTML元素和DOM上能獲取


28、當 html中的dom、JS、CSS加載完,但頁面資源未完全加載完時,會觸發一個事件
IE:支持onreadyStateChange事件

FF:支持DOMContentLoaded事件


29、在ajax中創建請求服務器端的對象IE7及以上瀏覽器支持 new XMLHttpRequest()    IE6:支持new window.ActiveXObject("Micrisoft.XMLHTTP")

30、CSS中calc 屬性支持ie9以上

32、attr屬性支持ie8以上

33、linear-gradient、radial-gradial支持ie10以上

34、@media支持ie9以上

35、@keysframe支持ie10以上

36、@supports支持12以上

rule:指定一條具體的CSS規則,必須使用括號包裹
operator:使用or | and | not等操作符指定多條規則。


37、E::selection支持ie9以上

38、E::placeholder支持ie10-11以上

39、偽類選擇器支持ie9以上

40、屬性選擇器支持ie7以上

41、關系選擇器支持ie7以上

42、background-origin、background-clip、background-size支持ie9以上

background-clip:text; IE:不支持6.0-11.0FF:不支持2.0-38.0

43、變換transform支持ie9以上、有部分支持 ie10以上

44、新伸縮flex支持ie11以上

45、動畫animate支持ie10以上

46、媒體查詢支持ie9以上

1>不支持嵌套媒體查詢(ie9-11)。
2>使用height作為媒體查詢條件,是包含滾動條在內的(ie9)


47、獲取網頁中滾動條滾動的距離

         window.pageXOffset/window.pageYOffset:支持ie9以上瀏覽器、chrome(標准模式、怪異模式)、FF(標准模式、怪異模式)

document.body.offsetTop/document.body.scrollLeft: chrome(標准模式、怪異模式)、IE(怪異模式)

        document.documentElement.scrollTop/document.documentElement.scrollLeft::FF (標准模式)、IE(標准模式)


50、audi: 元素支持三種音頻格式


audi: 元素支持三種音頻格式

audio 元素允許多個source元素。source元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

51、flex屬性支持ie11+

flex:復合屬性flex-grow:用來指定擴展比率。
flex-shrink:用來指定收縮比率。
flex-basis:用來指定伸縮基准值。

flex-flow:復合屬性
flex-direction定義彈性盒子元素的排列方向。
flex-wrap:控制flex容器是單行或者多行。

align-content:相關屬性
flex-start:各行向彈性盒容器的起始位置堆疊。
flex-end:各行向彈性盒容器的結束位置堆疊。
center:各行向彈性盒容器的中間位置堆疊。
space-between:各行在彈性盒容器中平均分布。
各行在彈性盒容器中平均分布,兩端保留子元素與子元素之間間距大小的一半。
stretch:各行將會伸展以占用剩余的空間。

align-items:屬性值
flex-start:彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end:彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
center:彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度)。
baseline:如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。
stretch:如果指定側軸大小的屬性值為'auto',則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。

align-self:屬性值
auto:如果'align-self'的值為'auto',則其計算值為元素的父元素的'align-items'值,如果其沒有父元素,則計算值為'stretch'。
flex-start:彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end:彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
center:彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度)。
baseline:如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。
stretch:如果指定側軸大小的屬性值為'auto',則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。

justify-content:屬性值
flex-start:彈性盒子元素將向行起始位置對齊。
flex-end:彈性盒子元素將向行結束位置對齊。
center:彈性盒子元素將向行中間位置對齊。
space-between:彈性盒子元素會平均地分布在行里。
space-around:彈性盒子元素會平均地分布在行里,兩端保留子元素與子元素之間間距大小的一半。

order:用整數值來定義排列順序,數值小的排在前面。可以為負值。

52、站點有關meat元素的說明

<meta name="keywords" content="網站關鍵字" />
<meta name="description" content="網站描述" />
<meta name="baidu-site-verification" content="百度站長驗證代碼審核" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<meta name="x5-page-mode" content="app"/>
<meta name="browsermode" content="application"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="蘋果手機web標題" />


53、<input/>、<a>元素中CSS屬性:outline: -webkit-focus-ring-color auto 5px;chrome支持 IE FF不支持


54、input的type類型為button和text,二個元素在同一行中且一樣的高度一樣的Line-height;二個元素在垂直居中錯位一個像素

解決辦法:
1)設置float:屬性

此問題是在chrome ff下發現的,ie8正常

55、word-break和word-wrap的區別?

word-break:break-all 允許在單詞內換行;如果單詞的中間位置正好在換行處,那么換行處的后間個單詞換在下一行顯示;
word-wrap:break-word 在長單詞或 URL 地址內部進行換行;上和情況一下的,這個單詞就直接換到下一行顯示;不會把單詞分面二塊顯示;

56、在輸入框內點回車會跳轉到別的頁面,原因是有一個Button元素上有onclick事件

<button class="btn_base backBtn" onclick="window.location.href='{:U('SearchCustomer/index')}'">返回上一步</button>


57、iframe中的contentWindow與contentDocument中的區別?

contentWindow 兼容各個瀏覽器,可取得子窗口的 window 對象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 對象。

也是用的contentWindow,可以取到contentWindow.document


58、min-width、padding-left:屬性和box-sizing在一起使用時, min-width在IE8下失效

59、

60、








持續更新中...


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com