摘要:當一個元素的屬性值為時,它負責對自己和可能的子孫元素進行尺寸計算和定位。哪些元素默認有屬性在瀏覽器中下列默認的元素很多情況下,我們把的狀態(tài)改成就可以解決很大部分下顯示的。這兒所示的一般指的是以及以下的瀏覽器。
hasLayout是IE特有的一個屬性。很多的ie下的css bug都與其息息相關。在ie中,一個元素要么自己對自身的內(nèi)容進行計算大小和組織,要么依賴于父元素來計算尺寸和組織內(nèi)容。當一個元素的hasLayout屬性值為true時,它負責對自己和可能的子孫元素進行尺寸計算和定位。雖然這意味著這個元素需要花更多的代價來維護自身和里面的內(nèi)容,而不是依賴于祖先元素來完成這些工作。
在IE瀏覽器中下列默認hasLayout=true的元素 很多情況下,我們把 hasLayout的狀態(tài)改成true 就可以解決很大部分ie下顯示的bug。這兒所示的bug一般指的是IE7以及以下的瀏覽器。 如何設置haslayout? 下面列出可以觸發(fā)hasLayout的一些CSS屬性值。 position: absolute (取消使用:static) float: left or right(取消使用:none) display: inline-block (取消使用:其它值) width: 除了auto以外的值(取消使用:auto) height: 除了auto以外的值(取消使用:auto) zoom: 有值(取消使用:normal或者空值) ie7還有一些額外的屬性可以觸發(fā)該屬性(不完全列表): min-height: (網(wǎng)上查看說是任何值,但實踐發(fā)現(xiàn)還是除了none與auto) max-height: (任何值除了none與auto) min-width: (網(wǎng)上查看說是任何值,但實踐發(fā)現(xiàn)還是除了none與auto) max-width: (任何值除了none與auto) overflow: (任何值除了visible) overflow-x: (任何值除了visible) overflow-y: (任何值除了visible) position: fixed js測試一個元素是否有l(wèi)ayout 這個是文本內(nèi)容 在IE瀏覽器中點擊這個ID為menu的DOM元素,如果元素有l(wèi)ayout,那么彈出來的結果是true,否則為false。 舉例 1.當一個元素內(nèi)含浮動或絕對定位的內(nèi)容時,它通常會表現(xiàn)出奇怪和錯誤的行為,看下面的代碼:html: css: #nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1; } #floatbox { float: left; width: 100px; height: 100px; border: 1px solid #0000FF; background: #00FF00; } IE瀏覽器得到的結果如圖所示: 可見無浮動的div并沒有被里面的浮動元素的高度撐開,其高度并不會自動計算。我們下面再給這個無浮動的div加上個zoom:1;來觸發(fā)其hasLayout屬性試試,css代碼如下: #nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1; } 在IE7以及低版本瀏覽器得到的結果如圖: 那么其它標準瀏覽器就相當于清除子元素的浮動就可以,在父元素中添加overflow:hidden就可以。 2.hasLayout對于內(nèi)聯(lián)元素也可以有效果,當內(nèi)聯(lián)元素的hasLayout為true的時候,可以給這個內(nèi)聯(lián)元素設定高度和寬度并得到期望的效果,(這兒是指IE7以及低版本瀏覽器)如下例: 今天的天氣真好 瀏覽器的效果如圖所示: 下面給span加上zoom: 1;來觸發(fā)hasLayout: 今天的天氣真好 在IE7瀏覽器中的效果如圖所示: 注意:要注意的是,hasLayout是微軟專有的東西,對firefox,Chrome等比較遵守標準的瀏覽器就無效了,因此不可太過依賴。其實依據(jù)合理的語義化,恰當?shù)奈臋n流,正確的標準化所生產(chǎn)出來的頁面,在各個公司出品的標準渲染的瀏覽器下,一般并不會存在太多兼容性的問題的。 GPU云服務器 云服務器 IE,haslayout 跳轉(zhuǎn)html顯示ie8css php中css的用法 瀏覽器對和css3的支持 文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/112466.html 上一篇:CSS 屬性賦值 下一篇:豎直居中方式總結 相關文章 談談BFC與ie特有屬性hasLayout 摘要:當一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因為導致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字,用來測試的正常情況下解決方式加一個的不只是文字,的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關于BFC的文章粘貼過來,順便自己也再次做個總結。 最近看了一篇總結ie常見bug的文章,里面提... iliyaku 2019-08-01 15:08 評論0 收藏0 談談BFC與ie特有屬性hasLayout 摘要:當一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因為導致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字,用來測試的正常情況下解決方式加一個的不只是文字,的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關于BFC的文章粘貼過來,順便自己也再次做個總結。 最近看了一篇總結ie常見bug的文章,里面提... CodeSheep 2019-08-30 12:51 評論0 收藏0 2019屆校招前端面試題整理——HTML、CSS篇 摘要:前言屆校招陸陸續(xù)續(xù)開始了,整理了一些高頻的面試題。標簽提供給頁面的一些元信息名稱值對,有助于。開啟缺點一個是不支持,另一個是一旦子元素的大小超過父容器的大小,就會出顯示問題。用于設置或檢索元素的縮放比例,值為即使用元素的實際尺寸。 前言 2019屆校招陸陸續(xù)續(xù)開始了,整理了一些高頻的面試題。 HTML部分 1. 什么是? DOCTYPE是html5標準網(wǎng)頁聲明,且必須聲明在HTML文檔... Turbo 2019-08-29 16:21 評論0 收藏0 2019屆校招前端面試題整理——HTML、CSS篇 摘要:前言屆校招陸陸續(xù)續(xù)開始了,整理了一些高頻的面試題。標簽提供給頁面的一些元信息名稱值對,有助于。開啟缺點一個是不支持,另一個是一旦子元素的大小超過父容器的大小,就會出顯示問題。用于設置或檢索元素的縮放比例,值為即使用元素的實際尺寸。 前言 2019屆校招陸陸續(xù)續(xù)開始了,整理了一些高頻的面試題。 HTML部分 1. 什么是? DOCTYPE是html5標準網(wǎng)頁聲明,且必須聲明在HTML文檔... Tamic 2019-08-02 11:13 評論0 收藏0 瀏覽器兼容 摘要:一什么是瀏覽器兼容問題同一份代碼,有的瀏覽器顯示效果正常,有的瀏覽器顯示不正常二為什么會有瀏覽器兼容問題同一產(chǎn)品,版本越老越多同一產(chǎn)品,版本越新,功能越多。實際項目中大部分是針對瀏覽器不同版本之間的表現(xiàn)差異而引入的。 一、什么是瀏覽器兼容問題 同一份代碼,有的瀏覽器顯示效果正常,有的瀏覽器顯示不正常 二、為什么會有瀏覽器兼容問題 同一產(chǎn)品,版本越老 bug 越多 同一產(chǎn)品,版本越新,... hqman 2019-08-29 17:12 評論0 收藏0 發(fā)表評論 登陸后可評論 0條評論 bitkylin 男|高級講師 我要關注 我要私信 TA的文章 閱讀更多 tensorflow 閱讀 3397·2023-04-25 16:25 80VPS新上日本CN2線路VPS,2G內(nèi)存套餐年付330元起 閱讀 3955·2021-11-15 18:01 #中秋活動#JGKVM:VPS買一送二,購買一個月可贈送兩個月,提供6折優(yōu)惠碼 閱讀 1680·2021-09-10 11:21 阿里云云大使、騰訊云推薦者、華為云云推官和UCloud優(yōu)刻得U大使,云服務器新用戶CPS推薦返利選哪 閱讀 3175·2021-08-02 16:53 深入淺出,手把手教你編寫正則表達式 閱讀 3157·2019-08-30 15:55 那些年,碰上過的面試題 閱讀 2556·2019-08-29 16:24 CSS基礎篇--CSS中IE瀏覽器的hasLayout,IE低版本的bug根源 閱讀 2168·2019-08-29 13:14 iconfont實踐小結 閱讀 1114·2019-08-29 13:00 最新活動 閱讀需要支付1元查看 支付并查看 <
很多情況下,我們把 hasLayout的狀態(tài)改成true 就可以解決很大部分ie下顯示的bug。這兒所示的bug一般指的是IE7以及以下的瀏覽器。
下面列出可以觸發(fā)hasLayout的一些CSS屬性值。
position: absolute (取消使用:static)
float: left or right(取消使用:none)
display: inline-block (取消使用:其它值)
width: 除了auto以外的值(取消使用:auto)
height: 除了auto以外的值(取消使用:auto)
zoom: 有值(取消使用:normal或者空值)
ie7還有一些額外的屬性可以觸發(fā)該屬性(不完全列表):
min-height: (網(wǎng)上查看說是任何值,但實踐發(fā)現(xiàn)還是除了none與auto)
max-height: (任何值除了none與auto)
min-width: (網(wǎng)上查看說是任何值,但實踐發(fā)現(xiàn)還是除了none與auto)
max-width: (任何值除了none與auto)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)
position: fixed
這個是文本內(nèi)容
在IE瀏覽器中點擊這個ID為menu的DOM元素,如果元素有l(wèi)ayout,那么彈出來的結果是true,否則為false。
1.當一個元素內(nèi)含浮動或絕對定位的內(nèi)容時,它通常會表現(xiàn)出奇怪和錯誤的行為,看下面的代碼:html:
css:
#nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1; } #floatbox { float: left; width: 100px; height: 100px; border: 1px solid #0000FF; background: #00FF00; }
IE瀏覽器得到的結果如圖所示:
可見無浮動的div并沒有被里面的浮動元素的高度撐開,其高度并不會自動計算。我們下面再給這個無浮動的div加上個zoom:1;來觸發(fā)其hasLayout屬性試試,css代碼如下:
#nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1; }
在IE7以及低版本瀏覽器得到的結果如圖:
那么其它標準瀏覽器就相當于清除子元素的浮動就可以,在父元素中添加overflow:hidden就可以。
2.hasLayout對于內(nèi)聯(lián)元素也可以有效果,當內(nèi)聯(lián)元素的hasLayout為true的時候,可以給這個內(nèi)聯(lián)元素設定高度和寬度并得到期望的效果,(這兒是指IE7以及低版本瀏覽器)如下例:
今天的天氣真好
瀏覽器的效果如圖所示:
下面給span加上zoom: 1;來觸發(fā)hasLayout:
在IE7瀏覽器中的效果如圖所示:
注意:要注意的是,hasLayout是微軟專有的東西,對firefox,Chrome等比較遵守標準的瀏覽器就無效了,因此不可太過依賴。其實依據(jù)合理的語義化,恰當?shù)奈臋n流,正確的標準化所生產(chǎn)出來的頁面,在各個公司出品的標準渲染的瀏覽器下,一般并不會存在太多兼容性的問題的。
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/112466.html
摘要:當一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因為導致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字,用來測試的正常情況下解決方式加一個的不只是文字,的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關于BFC的文章粘貼過來,順便自己也再次做個總結。 最近看了一篇總結ie常見bug的文章,里面提...
摘要:前言屆校招陸陸續(xù)續(xù)開始了,整理了一些高頻的面試題。標簽提供給頁面的一些元信息名稱值對,有助于。開啟缺點一個是不支持,另一個是一旦子元素的大小超過父容器的大小,就會出顯示問題。用于設置或檢索元素的縮放比例,值為即使用元素的實際尺寸。 前言 2019屆校招陸陸續(xù)續(xù)開始了,整理了一些高頻的面試題。 HTML部分 1. 什么是? DOCTYPE是html5標準網(wǎng)頁聲明,且必須聲明在HTML文檔...
摘要:一什么是瀏覽器兼容問題同一份代碼,有的瀏覽器顯示效果正常,有的瀏覽器顯示不正常二為什么會有瀏覽器兼容問題同一產(chǎn)品,版本越老越多同一產(chǎn)品,版本越新,功能越多。實際項目中大部分是針對瀏覽器不同版本之間的表現(xiàn)差異而引入的。 一、什么是瀏覽器兼容問題 同一份代碼,有的瀏覽器顯示效果正常,有的瀏覽器顯示不正常 二、為什么會有瀏覽器兼容問題 同一產(chǎn)品,版本越老 bug 越多 同一產(chǎn)品,版本越新,...
閱讀 3397·2023-04-25 16:25
閱讀 3955·2021-11-15 18:01
閱讀 1680·2021-09-10 11:21
閱讀 3175·2021-08-02 16:53
閱讀 3157·2019-08-30 15:55
閱讀 2556·2019-08-29 16:24
閱讀 2168·2019-08-29 13:14
閱讀 1114·2019-08-29 13:00