css bug

测试IE6及IE6+
推荐：良心总结

• IE8中input[button|submit]不能用margin:0 auto;居中
  div{ width:100px;margin:0 auto;}
  对于块级元素，当我想让他居中时，我会这样做，先设置宽度，再设置自动边距。因为如果不设置宽度，他将占据一行，就谈不上居中布局中啦。
  a{
  display: block;
  margin: 0 auto;
  width: 100px;
  }
  对于行内非替换元素，当我想让他居中时，我发现①他设置不了宽度②设置自动边距无反应。解决办法：将行内非替换元素设为块级元素，该元素会立马将宽度填充“父元素的当前宽度”，当前两个字，需要着重理解。然后就和对待块级元素一样的办法，设置自动边距就有效果啦。
  div input[type=button]{
  width: 200px;
  margin: 0 auto;
  display: block;
  border: 0;
  }
  对于行内替换元素，当我想让他居中时，就有差异啦。他们的默认display:inline-block，所以宽度，高度都可以设置。
  1、对于非[button||submit]的行内替换元素，首先：这些元素同行内元素一样需要转换为块级元素，但是，不同的是，他们的宽度，并不会充斥父元素。然后通过设置自动边距，就会达到居中的效果。
  2、对于[button||submit]的行内替换元素，其实要想达到居中的效果，同1的做法一样，但是，在IE8会出现bug，为了兼容IE8，需要为该元素设置宽度，就可以很好地兼容。
• body{overflow:hidden;}没有去掉IE6、7的滚动条
  这个bug，怎么说呢，一般的网页内容肯定是需要翻页的，需要拖动滚动条的，所以这个bug有没有必要解决，就看个人在网站设计时，的需要了。
  解决办法：
  html{ overflow:hidden}

haslayout是IE的专有属性，当该值为true时，他可以自己控制自己自身的内容。现代浏览器，IE8+都不会考虑这个属性。举个例子。
我们希望为行内元素设置宽高，习惯上，我们会将其转换为块级元素，然后再设置。但是IE6/7只需要通过启动hasLayout的值为true就可以为行内元素布局。启动该属性的属性为：display:inline-block width\height positon:ansolute float zoom:1
对于行内元素，只需要
a{*zoom:1;width:100px;height:100px}
这样一想其实有没有这个属性也都完全可以实现么，但是就是因为这个属性的出现，所以就带来了一系列的问题。

• IE6/7hasLayout的标签拥有高度
  在IE6、7中如果触发一个元素的hasLayout会使他拥有高度，即使内容为零。
  div{ width: 100%;*height: 0;_overflow:hidden;}
  设置完宽度后，会触发hasLayou，然后需要做的就是设置高度为0，设置溢出为隐藏。
• IE6、7当：form>[haslayout]元素有margin-left时，子元素中的[input|textarea]出现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当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置overflow：visible**
  解决办法：给父元素设置position:relative
• IE:7:hover伪类不能改变有position：absolute的子元素的left与top值
  .con:hover .vise{
  left: 0;
  }
  解决办法：
  1、把top/left的值设置成初0%外所有百分值。
  2、或添加一个margin-[所有方向]除零与0%外所有值。
  .con:hover .vise{
  left: 0;
  margin-left: 1px;
  }
  但是IE6不支持这个选择器。
• IE8:focus+selector{}选择器失败
  :focus+p{
  font-weight:bold ;
  font-size: 200%;
  }
  当一个元素获得焦点后，让他的下一个兄弟元素进行加粗与放大。但是在IE6、7中均不能实现。在IE8中只有当元素获得焦点又失去焦点时，才显示。解决办法：
  :focus+p{
  font-weight:bold ;
  font-size: 200%;
  }
  :focus{}
  在之后在添加一个空选择器。
• 列表中混乱的浮动：在list中浮动图片时，图片溢出正常位置，或没有list-style
  解决办法：
  1、li{overflow:hidden}包围列表内的浮动元素。
  2、li{background:url() left norepeat 0.5em}左置为图标。
  3、li{padding-left：2em；}设置左边的内边距，流出背景图片显示。
  这个问题比较普遍，就不区分浏览器啦。
• th不会继承上级元素的text-align
  这个我在IE8以上的IE浏览进行测试，发现th内的文本总是居中。
  table{text-align:left};th{text-align:inherit}
• 样式（link、style、@import）的个数
  在IE6~9这几版浏览器中只支持31个这样的样式标签，到第32个就不支持啦。
• IE7：hover时若background-color：#fff失效
  这个我测试之后，发现IE7是可以的，可能我的ietester有问题，不知道啊，但是原文作者给的解决方法有两个
  1、写成background
  2、#fff或#fffffff改为其他颜色。
  IE6不支持这个选择器
• IE6、7忽略>后有注释的选择器
  html>/**/body div{……}
  IE6、7浏览器渲染时，忽略注释后面的选择器，导致结果渲染不到IE6、7
• IE6中PNG图片中的颜色和背景色的值相同，但显示不同
  div{ height:100px;background: url(../../../LG/image/arr.png) red no-repeat;}
• IE8使用伪类[first-line|first-letter]属性的值中出现！important会使属性失效
  解决办法：那就不用呗，专家建议，说还是少用比较好。
  这个选择器IE6不支持这个选择器
• IE6 :first-letter失效
  这个测试时，我的IEtester是不是真的有问题，我的IE6根本就不支持：first-letter这个伪类。刚刚查了w3c说所有主流浏览器都支持这个，还有刚才那个hover也都支持，莫非我的ietester真的出了问题。
  直接解决办法吧：h1，p:first-letter{……}
  原文作者描述出现问题的原因是p:first-letter，h1{……}
• IE6position:absolute元素中，a：display:block,在非：hover时，只有文本可以点击
  解决办法：background:url(任何页面中已经缓存的文件链接)，不推荐，因为会增加以下http请求。
• IE6、7在ul>li>a中，li不设置float，a设置display:block;float:left,li不水平对齐
  解决办法：给li设置display:inline;或float方向。
• IE6dt,dd,li{background:red}背景失效
  这个我的IE6也没出问题，估计真的是有毛病，大家可以自己测试。
  解决办法：dt,dd,li{background:red;position:relaitive}
• IE6/7/8<noscript>元素在启用js的情况下显示了样式
  利用js为<noscript>动态添加display：none样式
• IE6、7、8使用filter处理的透明背景图片的透明部分不可点击
  解决办法：把background：none变为background：url（#）链接到图片与本身之外的任何文件。
• IE li内元素偏离baseline向下偏离
  这个最头痛，因为一般我都是将li设置浮动，所以基本上就没有考虑过这个。大家测试一下就知道了，在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;
  }
  这个之前做导航的时候发现的
• 在IE6、7中，当为ul与ol设置宽度后，会导致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;
  }
  解决办法：给指针文件设置绝对路径
  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是这样呈现的.jpg IE6拖动左边垂直滚动条.jpg

解决办法：
#container:{overflow:hidden;zoom:1;}

• IE6中将height与width当做min-height与min-width渲染
  解决办法：_overflow:hidden;
• IE6双倍边距
  这个是最经典的IE6最经典的bug之一。
  出现在父元素与子元素之间，子元素同时设置了浮动与边距属性，那么IE6中子元素会出现双倍边距的现象。
  解决办法：为浮动元素设置为行内元素
• IE6、7margin负值隐藏，haslayout的父元素内非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中子元素超出父元素的部分不可见。
  这个出现的原因是，为父元素设置了宽度后，导致父元素拥有布局，隐藏了超出父元素的内容。
  解决办法：为子元素赋予布局，然后设为相对定位。
• IE6中两个浮动元素，被放在一个固定宽度的容器内，且二者都被固定了宽度，这时候左边浮动元素内布置斜体内容，会将右边浮动元素挤下去
  原因：斜体元素靠近在靠近右边界是，会由于自身斜体原因，扩出边界，进而导致在IE6中宽度会自增，导致把右边浮动元素挤下去。
  解决办法：为斜体所在容器设置：overflow:hidden.
• IE6/7float元素后可能会有3px间隔
  当一个元素设置了宽高后，再设置内部元素浮动，连续几个这样的设置，有么能造成他们之间有3px的间隔。
  解决办法：为包围浮动的元素设置浮动，然后为了保持依旧的垂直排列，可以使的浮动元素的宽度为100%。
• IE6/7text-align
  <div style="text-align: center; background: blue;">
  ddd
  <p style="width: 100px;background: red;">dd</p>
  </div>
  在现代浏览器中，p里面的内容会居中，但是p这个块级元素并不会居中。
  IE6、7,P这个块级元素也被居中啦。
  解决办法，设置p浮动。
• IE6、7中li内放置内容后，会在自身高度外流出一些空白
  解决办法：overflow:hidden;
• IE6/7存在浮动元素折行
  css2.1中说：如果一个行内元素浮动，则该元素浮动后，顶部与之前所在行对齐。
  在现代浏览其中，就是照这样的标准渲染的，如果在一对行内元素后，来浮动一个块级元素，该块级元素也会与行内元素所在行的顶部对齐。
  但是IE6、7中，却表现出，折行之后又浮动的现象。
  触发原因：同一个复容器内，有多个行内元素，某些为浮动，某些为非浮动，当浮动的子元素不都是位于非浮动的子元素之前时，会触发折行。
  解决办法：1、将浮动元素放在非浮动元素之前。（推荐）
  2、使用绝对定位，会导致破坏文档结构（不推荐）
  3、使用csshack，利用负边距实现。

---

我目前见过的，和在之前推荐的那篇文章里学到的，大多，都在这里啦，总结：实践出真知
明年就要开始找工作啦，作为应届生，没有经验，只能多看书，看那些有经验的人的总结！
fighting！