測試IE6及IE6+
推薦：良心總結(jié)

• IE8中input[button|submit]不能用margin:0 auto;居中
  div{ width:100px;margin:0 auto;}
  對于塊級元素，當(dāng)我想讓他居中時，我會這樣做军援，先設(shè)置寬度仗嗦，再設(shè)置自動邊距淤堵。因為如果不設(shè)置寬度，他將占據(jù)一行柬批，就談不上居中布局中啦啸澡。
  a{
  display: block;
  margin: 0 auto;
  width: 100px;
  }
  對于行內(nèi)非替換元素，當(dāng)我想讓他居中時氮帐，我發(fā)現(xiàn)①他設(shè)置不了寬度②設(shè)置自動邊距無反應(yīng)嗅虏。解決辦法：將行內(nèi)非替換元素設(shè)為塊級元素，該元素會立馬將寬度填充“父元素的當(dāng)前寬度”上沐，當(dāng)前兩個字皮服，需要著重理解。然后就和對待塊級元素一樣的辦法，設(shè)置自動邊距就有效果啦龄广。
  div input[type=button]{
  width: 200px;
  margin: 0 auto;
  display: block;
  border: 0;
  }
  對于行內(nèi)替換元素硫眯，當(dāng)我想讓他居中時，就有差異啦择同。他們的默認display:inline-block两入，所以寬度敲才，高度都可以設(shè)置裹纳。
  1、對于非[button||submit]的行內(nèi)替換元素紧武，首先：這些元素同行內(nèi)元素一樣需要轉(zhuǎn)換為塊級元素剃氧，但是，不同的是阻星，他們的寬度朋鞍，并不會充斥父元素。然后通過設(shè)置自動邊距迫横，就會達到居中的效果番舆。
  2酝碳、對于[button||submit]的行內(nèi)替換元素矾踱，其實要想達到居中的效果，同1的做法一樣疏哗，但是呛讲，在IE8會出現(xiàn)bug，為了兼容IE8返奉，需要為該元素設(shè)置寬度贝搁，就可以很好地兼容。
• body{overflow:hidden;}沒有去掉IE6芽偏、7的滾動條
  這個bug雷逆，怎么說呢，一般的網(wǎng)頁內(nèi)容肯定是需要翻頁的污尉，需要拖動滾動條的膀哲，所以這個bug有沒有必要解決，就看個人在網(wǎng)站設(shè)計時被碗，的需要了某宪。
  解決辦法：
  html{ overflow:hidden}

haslayout是IE的專有屬性，當(dāng)該值為true時锐朴，他可以自己控制自己自身的內(nèi)容⌒宋梗現(xiàn)代瀏覽器，IE8+都不會考慮這個屬性。舉個例子衣迷。
我們希望為行內(nèi)元素設(shè)置寬高畏鼓，習(xí)慣上，我們會將其轉(zhuǎn)換為塊級元素蘑险，然后再設(shè)置滴肿。但是IE6/7只需要通過啟動hasLayout的值為true就可以為行內(nèi)元素布局。啟動該屬性的屬性為：display:inline-block width\height positon:ansolute float zoom:1
對于行內(nèi)元素佃迄，只需要
a{*zoom:1;width:100px;height:100px}
這樣一想其實有沒有這個屬性也都完全可以實現(xiàn)么泼差，但是就是因為這個屬性的出現(xiàn)，所以就帶來了一系列的問題呵俏。

• IE6/7hasLayout的標簽擁有高度
  在IE6堆缘、7中如果觸發(fā)一個元素的hasLayout會使他擁有高度，即使內(nèi)容為零普碎。
  div{ width: 100%;*height: 0;_overflow:hidden;}
  設(shè)置完寬度后吼肥，會觸發(fā)hasLayou，然后需要做的就是設(shè)置高度為0麻车，設(shè)置溢出為隱藏缀皱。
• IE6、7當(dāng)：form>[haslayout]元素有margin-left時动猬，子元素中的[input|textarea]出現(xiàn)2×margin-left啤斗。
  form div{
  width: 100%;
  margin-left: 100px;
  }
  input,textarea{//解決辦法
  *margin-left: -100px;
  }
• IE6、7 中4條邊框赁咙，其中一條寬度明顯大于其他三條邊钮莲，效果誤差
  p{
  width: 100px;
  border: 1px dotted #000;
  border-left-width:4px ;
  }
  
  IE9
  
  
  IE678.jpg
  
  解決辦法：
  <div><p>ddededede</p></div>
  p{
  width: 100px;
  border: 1px dotted #000;
  border-left-width:0px ;
  }
  div{
  border-left: 4px dotted #000;
  }
  
  解決.jpg
• ** IE：6、7當(dāng)子元素有position:relative的時候彼水，父元素設(shè)置overflow:[hidden|auto]相當(dāng)于給子元素設(shè)置overflow：visible**
  解決辦法：給父元素設(shè)置position:relative
• IE:7:hover偽類不能改變有position：absolute的子元素的left與top值
  .con:hover .vise{
  left: 0;
  }
  解決辦法：
  1崔拥、把top/left的值設(shè)置成初0%外所有百分值。
  2凤覆、或添加一個margin-[所有方向]除零與0%外所有值链瓦。
  .con:hover .vise{
  left: 0;
  margin-left: 1px;
  }
  但是IE6不支持這個選擇器。
• IE8:focus+selector{}選擇器失敗
  :focus+p{
  font-weight:bold ;
  font-size: 200%;
  }
  當(dāng)一個元素獲得焦點后盯桦，讓他的下一個兄弟元素進行加粗與放大慈俯。但是在IE6、7中均不能實現(xiàn)俺附。在IE8中只有當(dāng)元素獲得焦點又失去焦點時肥卡，才顯示。解決辦法：
  :focus+p{
  font-weight:bold ;
  font-size: 200%;
  }
  :focus{}
  在之后在添加一個空選擇器事镣。
• 列表中混亂的浮動：在list中浮動圖片時步鉴，圖片溢出正常位置揪胃，或沒有l(wèi)ist-style
  解決辦法：
  1、li{overflow:hidden}包圍列表內(nèi)的浮動元素氛琢。
  2喊递、li{background:url() left norepeat 0.5em}左置為圖標。
  3阳似、li{padding-left：2em骚勘；}設(shè)置左邊的內(nèi)邊距，流出背景圖片顯示撮奏。
  這個問題比較普遍俏讹，就不區(qū)分瀏覽器啦。
• th不會繼承上級元素的text-align
  這個我在IE8以上的IE瀏覽進行測試畜吊，發(fā)現(xiàn)th內(nèi)的文本總是居中泽疆。
  table{text-align:left};th{text-align:inherit}
• 樣式（link、style玲献、@import）的個數(shù)
  在IE6~9這幾版瀏覽器中只支持31個這樣的樣式標簽殉疼，到第32個就不支持啦。
• IE7：hover時若background-color：#fff失效
  這個我測試之后捌年，發(fā)現(xiàn)IE7是可以的瓢娜，可能我的ietester有問題，不知道啊礼预，但是原文作者給的解決方法有兩個
  1眠砾、寫成background
  2、#fff或#fffffff改為其他顏色逆瑞。
  IE6不支持這個選擇器
• IE6荠藤、7忽略>后有注釋的選擇器
  html>/**/body div{……}
  IE6伙单、7瀏覽器渲染時获高，忽略注釋后面的選擇器，導(dǎo)致結(jié)果渲染不到IE6吻育、7
• IE6中PNG圖片中的顏色和背景色的值相同念秧，但顯示不同
  div{ height:100px;background: url(../../../LG/image/arr.png) red no-repeat;}
• IE8使用偽類[first-line|first-letter]屬性的值中出現(xiàn)！important會使屬性失效
  解決辦法：那就不用唄布疼，專家建議摊趾，說還是少用比較好。
  這個選擇器IE6不支持這個選擇器
• IE6 :first-letter失效
  這個測試時游两，我的IEtester是不是真的有問題砾层，我的IE6根本就不支持：first-letter這個偽類。剛剛查了w3c說所有主流瀏覽器都支持這個贱案，還有剛才那個hover也都支持肛炮，莫非我的ietester真的出了問題。
  直接解決辦法吧：h1，p:first-letter{……}
  原文作者描述出現(xiàn)問題的原因是p:first-letter侨糟，h1{……}
• IE6position:absolute元素中碍扔，a：display:block,在非：hover時，只有文本可以點擊
  解決辦法：background:url(任何頁面中已經(jīng)緩存的文件鏈接)秕重，不推薦不同，因為會增加以下http請求。
• IE6溶耘、7在ul>li>a中二拐，li不設(shè)置float，a設(shè)置display:block;float:left,li不水平對齊
  解決辦法：給li設(shè)置display:inline;或float方向凳兵。
• IE6dt,dd,li{background:red}背景失效
  這個我的IE6也沒出問題卓鹿，估計真的是有毛病，大家可以自己測試留荔。
  解決辦法：dt,dd,li{background:red;position:relaitive}
• IE6/7/8<noscript>元素在啟用js的情況下顯示了樣式
  利用js為<noscript>動態(tài)添加display：none樣式
• IE6吟孙、7、8使用filter處理的透明背景圖片的透明部分不可點擊
  解決辦法：把background：none變?yōu)閎ackground：url（#）鏈接到圖片與本身之外的任何文件聚蝶。
• IE li內(nèi)元素偏離baseline向下偏離
  這個最頭痛杰妓，因為一般我都是將li設(shè)置浮動，所以基本上就沒有考慮過這個碘勉。大家測試一下就知道了巷挥，在IE上會嚇一跳的
  解決辦法就是
  li{
  float: left;
  width: 100%;
  }
  li a{
  display: block;
  background: red;
  }
  這樣就能達到最簡單的垂直菜單的效果。
  但是水平菜單時验靡，
  li{
  float: left;
  padding-left:2px ;
  }
  li a{
  display: block;
  padding:0 20px;
  background: brown;
  height: 40px;
  _float:left;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  }
  這個之前做導(dǎo)航的時候發(fā)現(xiàn)的
• 在IE6倍宾、7中，當(dāng)為ul與ol設(shè)置寬度后胜嗓，會導(dǎo)致list-style不顯示
  解決辦法：給li添加margin-left高职，留出地方顯示，不是給ul啊
• IE6辞州、7圖片不能垂直居中
  div {
  width: 150px;
  height: 155px;
  line-height: 155px;
  border: 1px solid #000;
  background: #f00;
  text-align: center;
  }
  img {
  vertical-align: middle;
  }
  span {
  display: inline-block;
  }
  解決辦法：在img標簽后怔锌，加一個空標簽，并使他擁有布局变过。
  <div>
  <img src="../../../LG/image/ff8080814ae248bd014ae65dcc97004e.jpg"/>
  <span id=""></span>
  </div>
• ** IE6埃元、7、8不能自定義指針樣式**
  引起兼容問題的寫法：
  div{
  height: 500px;
  width: 500px;
  margin: 20px auto;
  cursor: url(cursor.cur), crosshair;
  background: #f00;
  }
  解決辦法：給指針文件設(shè)置絕對路徑
  div{
  height: 500px;
  width: 500px;
  margin: 20px auto;
  cursor: url(/demos/cursor/b/cursor.cur), crosshair;
  background: #f00;
  }
• IE6背景溢出媚狰，拖動滾動條后顯示正常岛杀。
  這個說的太含糊啦，我還是上圖吧
  <div id='container' style="background: #abc;">
  <p id='bugger'>floated</p>
  <p>
  ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddddddddd
  </p>
  <div style="clear: both;"></div>
  </div>
  <div>give me</div>
  #bugger{float:left;backgroung:red}

IE6是這樣呈現(xiàn)的.jpg

IE6拖動左邊垂直滾動條.jpg

解決辦法：
#container:{overflow:hidden;zoom:1;}

• IE6中將height與width當(dāng)做min-height與min-width渲染
  解決辦法：_overflow:hidden;
• IE6雙倍邊距
  這個是最經(jīng)典的IE6最經(jīng)典的bug之一崭孤。
  出現(xiàn)在父元素與子元素之間类嗤，子元素同時設(shè)置了浮動與邊距屬性衫生，那么IE6中子元素會出現(xiàn)雙倍邊距的現(xiàn)象。
  解決辦法：為浮動元素設(shè)置為行內(nèi)元素
• IE6土浸、7margin負值隱藏罪针，haslayout的父元素內(nèi)非haslayout元素，使用負邊距黄伊，超出父元素部分可見
  <div id='container'>
  <div id="inner">
  <p>1</p> <br />
  <p>2</p> <br />
  <p>3</p> <br />
  </div>
  </div>
  #container{
  margin: 2em auto 0.5em;
  padding: 2em 0;
  width: 80%;
  border: 1px solid red;
  }
  #inner{
  margin: -4em 2em 0;
  }
• 在IE6泪酱、7中子元素超出父元素的部分不可見。
  這個出現(xiàn)的原因是还最，為父元素設(shè)置了寬度后墓阀，導(dǎo)致父元素擁有布局，隱藏了超出父元素的內(nèi)容拓轻。
  解決辦法：為子元素賦予布局斯撮，然后設(shè)為相對定位。
• IE6中兩個浮動元素扶叉，被放在一個固定寬度的容器內(nèi)勿锅，且二者都被固定了寬度，這時候左邊浮動元素內(nèi)布置斜體內(nèi)容枣氧，會將右邊浮動元素擠下去
  原因：斜體元素靠近在靠近右邊界是溢十，會由于自身斜體原因，擴出邊界达吞，進而導(dǎo)致在IE6中寬度會自增张弛，導(dǎo)致把右邊浮動元素擠下去。
  解決辦法：為斜體所在容器設(shè)置：overflow:hidden.
• IE6/7float元素后可能會有3px間隔
  當(dāng)一個元素設(shè)置了寬高后酪劫，再設(shè)置內(nèi)部元素浮動吞鸭，連續(xù)幾個這樣的設(shè)置，有么能造成他們之間有3px的間隔覆糟。
  解決辦法：為包圍浮動的元素設(shè)置浮動刻剥，然后為了保持依舊的垂直排列，可以使的浮動元素的寬度為100%搪桂。
• IE6/7text-align
  <div style="text-align: center; background: blue;">
  ddd
  <p style="width: 100px;background: red;">dd</p>
  </div>
  在現(xiàn)代瀏覽器中透敌，p里面的內(nèi)容會居中盯滚，但是p這個塊級元素并不會居中踢械。
  IE6、7,P這個塊級元素也被居中啦魄藕。
  解決辦法内列，設(shè)置p浮動。
• IE6背率、7中l(wèi)i內(nèi)放置內(nèi)容后话瞧，會在自身高度外流出一些空白
  解決辦法：overflow:hidden;
• IE6/7存在浮動元素折行
  css2.1中說：如果一個行內(nèi)元素浮動嫩与，則該元素浮動后，頂部與之前所在行對齊交排。
  在現(xiàn)代瀏覽其中划滋，就是照這樣的標準渲染的，如果在一對行內(nèi)元素后埃篓，來浮動一個塊級元素处坪，該塊級元素也會與行內(nèi)元素所在行的頂部對齊。
  但是IE6架专、7中同窘，卻表現(xiàn)出，折行之后又浮動的現(xiàn)象部脚。
  觸發(fā)原因：同一個復(fù)容器內(nèi)想邦，有多個行內(nèi)元素，某些為浮動委刘，某些為非浮動丧没，當(dāng)浮動的子元素不都是位于非浮動的子元素之前時，會觸發(fā)折行锡移。
  解決辦法：1骂铁、將浮動元素放在非浮動元素之前。（推薦）
  2罩抗、使用絕對定位拉庵，會導(dǎo)致破壞文檔結(jié)構(gòu)（不推薦）
  3、使用csshack套蒂，利用負邊距實現(xiàn)钞支。

我目前見過的，和在之前推薦的那篇文章里學(xué)到的操刀，大多烁挟，都在這里啦，總結(jié)：實踐出真知
明年就要開始找工作啦骨坑，作為應(yīng)屆生撼嗓，沒有經(jīng)驗，只能多看書欢唾，看那些有經(jīng)驗的人的總結(jié)且警！
fighting！