瀏覽器相容(3)寬高問題

2021-06-18 16:26:12 字數 873 閱讀 9290

(1) ie6下容器的寬度和高度與firefox解釋不同。

css:

width:100px; border:10px solid red;

ie6下的寬度為100px,而firefox的寬度為120px;

(2)頁面最小寬度

min-width可以制定元素的最小寬度,也就是制定之後這個元素的寬度不能小英這個值,

但是ie6不支援此屬性(i7之後支援)。這裡可以用只要ie才認得的js解決這個問題

css:

min-width: 600px;

width: e-expression(document.body.clientwidth < 600 ? "60px" : "auto");

(3)無法定義1px左右高度的容器

ie6的這個問題是由於預設行高照成的可以用這種方法解決:

css: overflow: hidden | zoom: 0.08 | line-height: 1px;

(4)最小高度的問題

min-height可以設定最小高度但是同意的ie6不支援解決方案是

css:

height: auto !important;

height: 200px;

min-height: 200px;

(5)div巢狀的時候y軸上外層div到內層div的距離

ff裡y軸上的子div到父div的距離為父padding + 子margin

ie6裡y軸上子div到父div的距離為父padding和子margin裡較大的乙個

ff裡y軸上父padding = 0,且子div到父div的距離為0,子margin作用到父div外面

寬高自適應 瀏覽器相容

若塊級元素寬度不設定,或者設定成100 都是佔據其父級元素的一整行 應用場景 1 頁面最外層的盒子一般都要佔據螢幕的大小,所以寬度100 2 子元素使用百分比表示盒模型任意部分大小的話,代表的是子元素盒模型任意部分尺寸 父元素寬度百分比 除了高度外,子元素高度 父元素高度百分比 忽略 父元素高度由子...

瀏覽器視窗寬高問題

使用window的screen 物件,可以得到螢幕解析度大小,與人為調整視窗大小無關 window.screen.width和window.screen.height 複製 1,非ie瀏覽器 window.innerwidth 2,ie瀏覽器 document.documentelement.cli...

JS瀏覽器獲取寬高

網頁可見區域寬 document.body.clientwidth 網頁可見區域高 document.body.clientheight html下獲取瀏覽器高度,xhtml下獲取元素總高度 網頁可見區域高 document.documentelement.clientheight xhtml下獲取...