hasLayout引發(fā)CSS的Bug有哪些-創(chuàng)新互聯(lián)
小編給大家分享一下hasLayout引發(fā)CSS的Bug有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
hasLayout！
先上定義：
它是IE的特有屬性。它決定著一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行計(jì)算大小和組織，要么依賴于父元素來計(jì)算組織內(nèi)容。為了區(qū)別這兩個(gè)概念，渲染引擎采用了hasLayout的屬性，true或false，當(dāng)屬性為true時(shí)，我們說這個(gè)元素觸發(fā)了布局(Layout)。
具有hasLayout屬性的標(biāo)簽：
<html>，<body><table>，<tr>，<td>，<td><img><hr><input>，<button>，<select>，<textarea>，<fieldset>，<legend><iframe>，<embed>，<object>，<applet><marquee>
這個(gè)屬性存在的意義？
當(dāng)一個(gè)元素對(duì)象的layout被激活時(shí)候，它和它的子元素的定位和尺寸計(jì)算將獨(dú)立進(jìn)行，也就是獨(dú)立布局，因此瀏覽器會(huì)消耗更多的代價(jià)來處理?yè)碛衛(wèi)ayout的元素。為了提高性能，IE整出了個(gè)這么個(gè)私有屬性。
可觸發(fā)hasLayout的CSS特性：
代碼如下:
display: inline-block
height:（除了auto之外任何值）
width:（除了auto之外任何值）
float:（left || right）
position：absolute
writing-mode：tb-rl
zoom:（除了normal之外任何值）
IE7可觸發(fā)hasLayout的CSS特性：
代碼如下:
min-height:（任意值）
min-width:（任意值）
max-height:（除none之外任意值）
max-width:（除none之外任意值）
overflow:（除visible之外任意值，僅用于塊級(jí)元素）
overflow-x:（除visible之外任意值，僅用于塊級(jí)元素）
overflow-y:（除visible之外任意值，僅用于塊級(jí)元素）
position:fixed
再來看看嘴歪眼斜的臨床表現(xiàn)：（以下內(nèi)容均本人親測(cè)）
| 問題 | 瀏覽器 | DEMO | 解決辦法 | |
| 1 | input[button | submit]未居中 | IE8 | bug | fixed | 添加width |
| 2 | body{overflow:hidden;}沒有去掉滾動(dòng)條 | IE6/7 | bug | fixed | 改成html{overflow:hidden;} |
| 3 | 擁有hasLayout的標(biāo)簽有高度 | IE6/7 | bug | fixed | 添加_overflow:hidden;*height:0 |
| 4 | form>[hasLayout]元素有margin-left時(shí)，子元素中的[input | textarea] 出現(xiàn)2×margin-left | IE6/7 | bug | fixed | form > [hasLayout 元素]{margin-left:寬度;} form div{*margin-left:寬度÷2;} |
| 5 | 當(dāng)子元素有position:relative的時(shí)候，父元素設(shè)置overflow:[hidden|auto]相當(dāng)于給子元素設(shè)置了position:visible; | IE6/7 | bug | fixed | 給父元素設(shè)置position:relative; |
| 6 | 列表中混亂的浮動(dòng)：在list中浮動(dòng)圖片時(shí)，圖片出現(xiàn)溢出正常位置；或沒有l(wèi)ist-style | IE8 | bug | fixed | 用背景圖片替換list-style |
| 7 | th 不會(huì)自動(dòng)繼承上級(jí)元素的 text-align | IE8 | bug | fixed | 給th添加text-align:inherit; |
| 8 | 樣式(包括link/style/@import(link)) 最多允許個(gè)為是：32 | IE6-8 | ─ 常識(shí) | 99.99%的情況下，不會(huì)遇到 |
| 9 | PNG圖片中的顏色和背景顏色的值相同，但顯示不同 | IE6-7 | bug | fixed | 利用pngcrush去除圖片中的 Gamma profiles |
| 10 | margin:0 auto; 不能讓block元素水平居中 | IE6-8 | bug | fixed | 給block元素添加一個(gè)width |
| 11 | 使用偽類 :first-line | :first-letter, 屬性的值中出現(xiàn)!important 會(huì)使屬性失效 | IE8 | bug | fixed | !important is evil, don’t use it anymore |
| 12 | :first-letter 失效 | IE6 | bug | fixed | 把 :first-letter 移到離{}最近的地方，如 h2, p:first-letter{}，而非 p:first-letter h2{} |
| 13 | Position:absolute元素中，a display:block, 在非:hover時(shí)只有文本可點(diǎn)擊 | IE6/7 | bug | fixed | 給a添加background, 如果背景透明，使用background:url(‘任何頁(yè)面中已經(jīng)緩存的文件鏈接’)，不推薦background：url(#)[官方的解決方法]，因?yàn)闀?huì)增加一下HTTP請(qǐng)求 |
| 14 | dt, dd, li 背景失效 | IE6 | bug | fixed | dt, dd, li{position:relative;} |
| 15 | <noscript />元素的樣式在啟用javascript的情況下顯示了樣式 | IE6-8 | bug | fixed | 利用js給<noscript />添加display:none; |
| 16 | li內(nèi)元素偏離 baseline 向下拉 | IE8/9 | bug | fixed | 給li設(shè)置display:inline 或 float:[方向] |
| 17 | 列表中l(wèi)i的list-style不顯示 | IE6/7 | bug | fixed | 給li添加margin-left，留空間來顯示（不要加在ul上） |
| 18 | 圖片不能垂直居中 | IE6/7 | bug/fixed | 添加一個(gè)空標(biāo)簽，并賦給”Layout”, 比如display:inline-block; |
| 19 | 不能自定義指針樣式 | IE6-8 | bug | fixed | 給指針文件設(shè)置絕對(duì)路徑 |
| 20 | 高度超過height定義的高 | IE6 | bug/fixed | 添加_overflow:hidden;(推薦)或者_(dá)font-size:0; |
| 21 | 寬度超過width定義的寬 | IE6 | bug/fixed | 添加_overflow:hidden; |
| 22 | 雙倍邊距 | IE6 | ─ 常識(shí) | 添加display:inline到float元素中 |
| 23 | margin負(fù)值隱藏：hasLayout的父元素內(nèi)的非hasLayout元素，使用負(fù)邊距時(shí)，超出父元素部分不可見 | IE6/7 | bug/fixed | 去掉父元素的hasLayout；或者賦hasLayout給子元素,并添加position:relative; |
| 24 | 給兩個(gè)浮動(dòng)元素的某中一個(gè)的文字設(shè)定為斜體，另一個(gè)元素下拉在有斜體文字元素的下面 | IE6 | bug/fixed | 給有斜體文字的元素添加overflow:hidden; |
| 25 | 3px 間隔：在float元素后的元素，會(huì)有3px間隔 | IE6 | bug/fixed | 因?yàn)槭谴_切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;或者也設(shè)置float |
| 26 | text-align 影響塊級(jí)元素 | IE6/7 | bug/fixed | 整理你的float；或者分開設(shè)置text-align |
以上是“hasLayout引發(fā)CSS的Bug有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁(yè)名稱：hasLayout引發(fā)CSS的Bug有哪些-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://jinyejixie.com/article42/coijhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)、定制網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- jenkins配置python腳本定時(shí)任務(wù)過程圖解-創(chuàng)新互聯(lián)
- 學(xué)Java最好買什么配置的電腦-創(chuàng)新互聯(lián)
- 建站github私有倉(cāng)庫(kù)作用？-創(chuàng)新互聯(lián)
- 做論壇買什么虛擬主機(jī)好-創(chuàng)新互聯(lián)
- benchmark指的是什么意思-創(chuàng)新互聯(lián)
- 局域網(wǎng)MAC地址認(rèn)證上網(wǎng)如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)
- html5怎么使用canvas繪制一張圖片-創(chuàng)新互聯(lián)
- 使用企業(yè)建站平臺(tái)的6個(gè)實(shí)用技巧 2013-09-27
- 企業(yè)建站要怎么選擇關(guān)鍵詞 2017-08-10
- 企業(yè)建站常見的9個(gè)域名錯(cuò)誤 2022-11-06
- 漲知識(shí)啦企業(yè)建站應(yīng)該建立什么樣的網(wǎng)站 2021-11-20
- 武漢公司網(wǎng)站建設(shè)：企業(yè)建站有哪些點(diǎn)是必須要注意的！ 2021-08-08
- 企業(yè)建站前到底需要準(zhǔn)備好哪些資料？ 2017-09-18
- 廣州網(wǎng)站制作公司分享企業(yè)建站之前應(yīng)該思考的問題 2014-12-30
- 中小企業(yè)建站時(shí)怎么去規(guī)劃？ 2023-02-21
- 企業(yè)建站的布局要點(diǎn)和常用互動(dòng)設(shè)計(jì) 2021-03-21
- 北京制作網(wǎng)站的公司分析企業(yè)建站創(chuàng)造的價(jià)值主要體現(xiàn)在哪些方面? 2021-04-26
- 企業(yè)建站有哪些功能？ 2016-05-14
- 成都企業(yè)建站如何避免被網(wǎng)絡(luò)公司忽悠，這四大點(diǎn)內(nèi)容必看 2016-12-15