-
1：li邊距“無故”增加
任何事情都是有原因的，li邊距也不例外。
先描述一下具體狀況：有些時候li邊距會突然增 加很多，值也不固定（只在IE6/IE7有這種現象），讓人摸不着頭腦，仔細“研究”發現是由於其低級元素ul的padding引 起，padding的上下值對li有影響，左右無影 響。所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但往往不是我們想要的結果，或許 還會引起其他不必要的怪現象。
現在終於發現解決這個問題的方法，其實很簡單，既然是有ul引 起的，就設置ul的顯示形式爲*display:inline-block;即可，前面加*是隻 針對IE6/IE7有效，其他瀏覽器並不渲染這個屬性。
-
2：分頁數字 字體用“Arial ”加粗不抖動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>無標題文檔</title>
<link href="css/style.css"rel="stylesheet"type="text/css"/>
<style type="text/css">
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;
background-color:#0CF;
color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分頁樣式</h1>
<div class="page"> <a href="#">1</a> <a href="#"class="selected">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>
<a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div></body>
</html> -
3：IE6 CSS選擇器區分IE6
IE6不支持子選擇器；先針對IE6使用常規申明CSS選擇器，然後再用子選擇器針對IE7+及其他瀏覽器。
/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;} -
4：IE6最小高度
sp;{color:blue;}
IE6 不支持min-height屬性，但它卻認爲height就是最小高度。解決方法：
使用ie6不支持但其餘瀏覽器支持的屬性!important。
#container{min-height:200px; height:auto !important; height:200px;} -
5：IE6100% 高度
n>
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得
先給html和body定義height:100%;。
sp;{color:blue;} -
6：IE6躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之後有不浮動的內容，並且有一
些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。
解決方法很簡單：
1.在（那個未浮動的）內容之後添加一個<span style="clear: both;"> </span>
2.觸發包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%; -
7:IE6絕對定位元素的1像素間距bug
IE6下的這個錯誤是由於進位處理誤差造成（IE7已修復），當絕對定位元素的父元素高或寬爲奇數時，bottom和right會
產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方法。 -
8: IE下z-index的bug
�決方法。
在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，所以會導致z-index出現錯誤的表現。解決方法是給
其父級元素定義z-index，有些情況下還需要定義position:relative。 -
9: Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上
position:relative;。 -
10: 橫向列表寬度bug
如果你使用float:left;把<li>橫向擺列，並且<li>內包含的<a>（或其他）觸發了 hasLayout，在IE6下就會有錯誤的
表現。解決方法很簡單，只需要給<a>定義同樣的float:left;即可。 -
11: 列表階梯bug
列表階梯bug通常會在給<li>的子元素<a>使用float:left;時觸發，我們本意是要做一個橫向的列表(通常 是導航欄)，
但IE卻可能呈現出垂直的或者階梯狀。解決辦法就是給<li>定義float:left;而非子元素<a>，或者 給<li>定義
display:inline;也可以解決。 -
12: 垂直列表間隙bug
當我們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。
解決方法：把<a>flaot並且清除float來解決這個問題；另外一個辦法就是觸發<a>的hasLayout（如定 義高寬、
使用zoom:1;）；也可以給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文
本末尾添加一個空格。 -
13: IE6調整窗口大小的 Bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body裏面的相對定位元素都會固定不動了。解決辦法：
給body定義position:relative;就行了。 -
14: 文本重複Bug
在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個浮動元素裏，就有可能引發文本重複bug。
解決辦法：給浮動元素添加display:inline;。 -
15：鏈接a的title屬性中的文字換行
我們都知道，可以給鏈接a加上title屬性，這樣鼠標移動上去會顯示title屬性定義的 文字，常常用來加一些提示語句，
比如說點擊查看詳情之類的，代碼形如：
<a href=”#” title=”點擊查看詳情”>鏈接xx</a>
。之前一直沒有仔細注意過這個東西。如果鼠標浮動上去要顯示更多東西的話，怎麼實現呢。第一 反應是jquery的tooltip插件。今天無意中發現某個學院的網站鼠標移動上去可以顯示這麼完整的信息，效果看起來似乎還可以，就想看看怎麼做的， 找了下，沒發現有Javascript腳本，再往鏈接的地方一看，終於讓我發現了門道了：
<a href='#' target="_blank" title="標題: 關於對我校2006年至2009年發展黨員工作情況進…
發佈日期: 2010-5-31 16:05:08類別：院務通知 點擊: 139">
[05-31] 關於對我校2006年至2009年發展黨員工作情況進…
</a>注意到了嗎。。很簡單，只要使用 這樣的轉義符號,即可實現換行。在一些tooltip要求定製性不高的情況下，這樣的顯示效果相 當不錯，而且是瀏覽器原生的效果，安逸。
哎，雖然號稱精通div+css，但是發現一些小小但是很實用的技巧自己還不知道，看來html還有很多東西可以挖掘。 -
16：如何去掉點擊鏈接時的虛線
解決方案1：在<a href="http://blog.sina.com/wangfengteacher"onFocus="this.blur()> Mike blog</a>
解決方案2：在標籤中加入 hidefocus<a href="http://blog.sina.com/wangfengteacher"hidefocus> Mike blog</a>
解決方案3: 如果連接太多，可以用外部鏈接 .HTC 文件。如，blur.htc
文件內容如下：
<public:attach event="onfocus"
onevent="makeblur()"></public:attach><SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
在 CSS 中加入如下代碼：
A { behavior:url(blur.htc); }
解決方案4 ( 推薦 )：使用CSS樣式，可加入代碼：a {blr:expression_r(this.onFocus=this.blur())}如果是FF等瀏覽器的話可這樣寫 a{ouline:none;}
-
17:製作1px細線表格
解決方案1 ( 推薦)：我們只要給這個table一個border-collapse:collapse的樣式，就可以達到這個效果了。
具體如下：
1、HTML結構:
<table width="300" border="1" cellpadding="0"cellspacing="0" bordercolor="#C0C0C0"
style="border-collapse:collapse;">
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table> -
18：IE6 下z-index無效
在CSS中，通過z-index這個屬性改變層級，要讓z-index起作用有個前提，就是元素的position屬性要 是 relative，absolute或是fixed。
z-index層級越高，內容越應該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對，尤其遇到IE6。
1、關於效果截圖的些必要說明
下面的不是廢話，是爲了更容易的理解我下面唾沫橫飛的內容。
以下所有結果截圖的大背景如下：
1、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度 40%，幾乎滿屏顯示的層級爲1的絕對定位層。HTML爲：<div></div>
對應CSS 爲：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是爲了讓層級關係一目瞭然。看：
這說明內容在z-index爲1的絕對定位層之下。
這說明內容在z-index爲1的絕對定位層之上。2、頁面上做對比的是美女圖片，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠對我所說的z- index不起作用有很直觀的認識了。
2、IE6的抱怨：浮動讓我沉淪
現在開始真正的講述 問題的產生，原因以及解決了。首先講講第一種z-index無論設置多高都不起作用情況。這種情況發生的條件有三個：1、父標籤 position屬性爲relative；2、問題標籤無position屬性（不包括static）；3、問題標籤含有浮動(float)屬性。
您 可以拿下面的代碼自己做個簡單測試：<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>丫的，這z-index都9999了，層級夠高吧，但是，看下面的圖：
這一對比就知道問題了，可能有人會疑問，這會不會是IE6的relative自己感冒了，而不是浮動(float)攜帶 了“甲流病毒”。好，我現在去掉浮動，HTML代碼如下：
<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>結果IE6下：
我想，問題應該都清楚了，至於原因，我起初以爲是haslayout搞的鬼，後來，用zoom一測試，發現不是（IE7 下無此bug也證明不是 haslayout的原因），似乎就是這個float會讓z-index失效。由於將外部div的position:relative屬性改爲 absolute可以解決這一問題，我就懷疑是不是浮動讓relative發生了些變化，float與relative在水平定位上可以說是近親，會不會 是因爲這兩者攪和在一起所以什麼“畸形”“體弱多病”就出現了。這僅是我的猜測而已，真正的原因還是去問IE6的後媽吧。
解決方法，解決方法有三，1、position:relative改 爲position:absolute；2、去除浮動；3、浮動 元素添加 position屬性（如relative，absolute等）。
3、固執的IE6：它只認第一個爸爸
可能不少人知 道，這IE6下，層級的高低不僅要看自己，還要看自己的老爸這個後臺是否夠硬。用術語具體描述爲：
父標籤position屬性爲relative 或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它 們的父標籤的z-index誰高誰低。有一定經驗的人可能都知道上面的事實。但是，相信這裏面很多人不知道IE6下，決定層級高低的不是當前的父標籤，而是整 個DOM tree（節點樹）的第一個relative屬性的父標籤。有時平時我們多處理一個父標籤，z-index層級多而複雜的情況不多見，所以難免會有認識上 的小小偏差。
好，下面展示這個bug。
條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小於黑色半 透明層的z-index層級。例如下面的HTML代碼：
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>可以看到，mm3圖片的父標籤div 是絕對定位，層級9999，比1大多了，絕對定位的父標籤層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可 憐的IE6童鞋——
再看看以Firefox爲代表的其他童鞋：
IE7與IE6有着同樣的bug，原因很簡單，雖然圖片所在div當前的老爸層級很高(1000)，但是由於老爸的老爸 不頂用，可憐了9999如此強勢的孩子沒有出頭之日啊！
知道原因解決就很輕鬆了，給第一任老爸添加z-index後的HTML代 碼如下：
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>結果IE6童鞋喜笑顏開，春光燦爛：
-
19：css reset中的list-style:none
在IE6,7下,當UL不具有float:left;display:inline;時:
無論有沒有list-style:none這個屬性,列 表符都被隱藏,不佔位置(下面代碼中的5,6)
當UL具有float:left;display:inline;屬性時
list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);
未 設置list-style:none;列表符被隱藏,也不佔位(list-style-position:outside)在firefox中只要list-style-type爲none ,則 無論list-stype-position的值爲outside或 inside , list-style都能很好的被隱藏
而在IE6,7中,僅 設置list-style:none,並不足以解決所有問題
所以我認爲在css reset的時候使用 list-style:none outside none 更好 -
20：鏈接去邊線（完全兼容）
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}
21: display:inline-block 額外產生的6PX 或者4px margin
今天在做一個Timeline的模塊的時候遇到一個棘手的問題： 給元素添加display:inline-block 屬性的時候會產生額外的 4px的margin-right。
原始代碼
.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-color:#00FF00;
position:relative;
}頁面渲染結果：
每一列都會向右產生外邊距4px，苦思不得其解，嘗試負的外邊距，但是涉及到其他的問題:每個li標籤會重疊1-2個px，妨礙到鼠標hover 狀 態的事件。嘗試修改doctype類型也不見效果。後來嘗試了另外一個方法：
把原來的HTML 代碼結構：
更改爲：
這樣就不會產生額外的外邊距，也弄不清楚爲什麼會出現這種問題。先暫時記下，以後再研究研究。
瀏覽器IE6、IE7、IE8、css bug兼容性處理
1：li邊距“無故”增加
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Couldn't find preset "es2015" relative to directory問題解決
Couldn’t find preset “es2015” relative to directory問題解決 npm install babel-preset-es2015 --save-dev