ie6常见css bug
IE6雙倍邊距bug
在IE6下如果某個標簽使用了float屬性，同時設置了其外補丁“margin:0 10px”可以看出，但第一個對象距左邊有20px。
說明：這是因為塊級對象默認的display屬性值是block，當設置了浮動的同時，還設置了它的外邊距 就會出現這種情況。也許你會問：“為什么第二個對象和第一個對象之間就不存在雙倍邊距的BUG”？因為浮動都有其相對應的對象，只有相對于其父對象的浮動 對象才會出現這樣的問題。第一個對象是相對父對象的，而第二個對象是相對第一個對象的，所以第二個對象在設置后不會出現問題。另外在一些特殊布局中，可能需要組合使用display:block;和display:inline;才能達到預期效果。
?
3像素問題及解決辦法
當使用float浮動容器后，在IE6下會產生3px的空隙 。
解決方法：a.對另一個元素同時使用float； b.為已經浮動的div添加一條語句：margin-right:-3px; ；
?
當子元素浮動且未知高度時，怎么使父容器適應子元素的高度？
這種情況可在父窗口加上 overflow:auto;zoom:1;這兩個樣式屬性，overflow:auto;是讓父容器來自適應內部容器的高度，zoom:1;是為了兼容 IE6而使用的CSS HACK。zoom:1;通不過W3C的驗證，這也是遺憾的一點，幸好IE支持<!--[if IE]>這種寫法，可以專門針對IE來寫單獨的樣式，所以可以把這個屬性寫在頁面內的<!--[if IE]>中，這樣應該可以通過驗證了。
?
超鏈接訪問過后hover樣式就不出現的問題
被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題，解決方法是改變CSS屬性的排列順序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
?
IE6文字溢出BUG
說明：注釋造成文字溢出是IE的BUG。
?
一個空格引發CSS失效p:first-letter {font-size:300%}
這 段代碼對<p>的首字符樣式定義在IE6上看是沒有效果的（IE7沒測試），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}后，顯示就正常了。但是同樣的代碼，在FireFox下看是正常的。按道理說，p:first- letter{font-size:300%}的寫法是沒錯的。那么問題出在哪里呢？答案是偽類中的連字符"-"。IE有個BUG，在處理偽類時，如果偽 類的名稱中帶有連字符"-"，偽類名稱后面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。
?
IE6中奇數寬高的BUG
IE6還有奇數寬高的bug，解決方案就是將外部相對定位的div寬度改成偶數。
?
IE6下為什么圖片下方有空隙產生
<div style="border:1px solid red;"> <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" style="width:276px;height:110px" /> </div>解決這個BUG的方法也有很多，可以是改變html的排版，或者定義img 為display:block
或者定義vertical-align屬性值為vertical-align:top | bottom |middle |text-bottom
還可以設置父容器的字體大小為零，font-size:0
?
ie6下空標簽高度問題
一個空div如果高度設置為0到19px，IE6下高度默認始終19PX。
例如：
.c{height:0px;/*給定任何小于20px的高度 */}
<div></div>
如果不讓它默認為19PX。而是0PX的話
解決方法有3種：
1.css里面加上overflow:hidden;
2.div里面加上注釋,
<div><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div> </div>(#換成&)
?
修正重復文字bug
復雜的布局可以觸發在浮動元素的最后一些字符可能出現在出現在清除元素下面的bug。這里有幾個解決方法，有些是完美的，但是做一些反復試驗也是必須的：
- 確保所有的元素使用”display:inline;”
- 在最后一個元素上使用一個”margin-right:-3px;”
- # 為浮動元素的最后一個條目使用一個條件注釋，比如：
<!–[if !IE]>Put your commentary in here…<![endif]–> - 在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。)
?
IE6下最小高度和寬度
.demo {/*設置元素的最小高度和最小寬度*/min-height: 100px;height: auto !important;/*現代瀏覽器下，內容高度超過100px時自動獲得其高度*/height: 100px;/*此值設置和min-height值一樣，因為IE6下元素高度會根據內容自己的高度而定，所以內容高度低于min-height值時，為了達到min-height效果，需要給元素一個顯式的高度值*/ }IE6 a:hover失效
a:hover { zoom:1}/*要解決這個問題就必須觸發a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。*/ a:hover span{color:#F00;}<a href="#">鼠標經過時改變我的<span>顏色</span></a>IE6/IE7下：塊元素(li) inline-block解決方案
如果是內聯元素使用了inline-block，那所有的瀏覽器顯示都是正常的。（ie6、ie7中對內聯元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表征。）
但是如果是塊級元素使用了inline-block，那在ie6和ie7中是有問題的。（ie6/ie7中塊元素僅僅是被display:inline-block觸發了layout，而它本身就是行布局，所以觸發后，塊元素依然還是行布局，而不會像火狐等其他瀏覽器塊元素呈遞為內聯對象。）
那么，ie6/ie7下塊元素如何實現display:inline-block的效果？解決方法如下：
讓標準瀏覽器識別display:inline-block;讓ie6/7識別display:inline;來覆蓋上面的display:inline-block;然后通過zoom:1;來觸發haslayout讓inline元素在ie中表現得和inline-block元素一樣。
.list1 li{display:inline-block; width:150px;?*zoom:1;*display:inline;}
加上*zoom:1(觸發ie6和ie7下的haslayout);*display:inline(只有ie6和ie7識別);
注：一定要加在display:inline-block;后面。
?
IE6不支持first-child的解決方法
.sidebar_block:first-child { margin:0; } .sidebar_block { * margin-top: expression(this.previousSibling==null?'0':'0px'); }?
參考鏈接：http://kayosite.com/ie6-common-css-bug.html
轉載于:https://www.cnblogs.com/eaysun/p/4108846.html
總結
以上是生活随笔為你收集整理的ie6常见css bug的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图像处理之 opencv 学习---op
- 下一篇： 【2014-11-22】《The Har