收集的一些前端Bug概要。先记上一笔！(二)

26.超链接访问过后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;}

27.IE6png图片的解决方案：

.png{background:url(html/images/common/footer.png) no-repeat !important;  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="html/images/common/footer.png");  background:none;  width:1000px;  height:115px;}
HTML代码：<div class="png">背景PNG透明<div>

28.一个空格引发CSS失效
这段代码对<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中，加不加空格都可以正常处理。


29.IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

30.IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0


31.ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
例如：
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,

<div class="c"><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,

<div class="c">&nbsp;</div>(#换成&)
 
32.修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

    确保所有的元素使用”display:inline;”
    在最后一个元素上使用一个”margin-right:-3px;”
    # 为浮动元素的最后一个条目使用一个条件注释，比如：
    <!–[if !IE]>Put your commentary in here…<![endif]–>
    在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)


33.解决IE6中DIV高度小于10px时高度无效 

我们只要把字体设为0就可以解决。

         例如：.mm{height:3px; font-size:0}

34.  完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试） table{border-collapse:collapse;} td{border:#000 solid 1px;}

  在IE中可能由于注释带来的文字重复问题时可以把注释改为： <!?[if !IE]>Put your commentary in here…<![endif]?>

  图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

34.、   CSS布局口诀 - CSS BUG顺口溜

·          IE边框若显若无，须注意，定是高度设置已忘记；
·          浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
·          三像素文本慢移不必慌，高度设置帮你忙；
·          兼容各个浏览须注意，默认设置行高可能是杀手；
·          独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
·          学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
·          所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
·          图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
·          IE浮动双边距，请用display：inline拘。
·          列表横向排版，列表代码须紧靠，空隙自消须铭记。

35.div等浮层在IE6下被下拉框遮挡的解决方法

解决的办法是：做两个浮动层，一个浮动层的根标签是IFrame，另一个浮动层的根标签是Div，两个浮动层的位置、大小均相等，然后先显示IFrame浮动层，再显示Div浮动层， 
这样IFrame浮动层就为Div浮动层遮盖住了下面的控件。 


<style type="text/css"> 
dl #iframe1     {display:none;_display:block;position:absolute;top:0;left:0px;z-index:-1;filter:mask();width:110px;height:420px;} 
      </style> 
IE6下Select元素被div等元素覆盖的解决办法

<iframe style="z-index:1"><!-- 用iframe 解决此bug --> 
<select name="country"> 
<option value="1">china</option> 
<option value="2">japanese</option> 
<option value="1">U.S.A</option> 
</select> 
</iframe> 


解决办法二：以Iframe作为div的子元素，覆盖select元素 
Code 


复制代码代码如下:


.T_iframe 
{ 
position: absolute;/*绝对定位保证iframe不会占用流布局空间*/ 
width: 100%; /*100%保证可以覆盖整个div*/ 
height: 100%; 
z-index:-1; /*-1保证iframe显示在div下方*/ 
} 
.T_div {position: absolute; left:100px; top:50px; width: 300px; height: 200px; background : blue; z-index:100; } 
<div class="T_div"> 
  <span>这里可以包含其他dom元素</span> 
  <iframe class="T_iframe"></iframe> 
</div> 

36.DIV无法自动高度 IE8无法自动高度


#outer:after{content:"."; height:0; visibility:hidden; display:block; clear:both; } 


37.IE6下position:absolute绝对定位的问题：在IE6下定位总是偏移，而且设定了left和top值，但是没有定位成功，这是为什么？

解决办法：因为在ie6中，父层需要写个高度，默认的情况大多都没有写。所以，给父层来个高度就可以搞定了

38.div的垂直居中问题


　　vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
39.如何对齐文本与文本输入框:加上 vertical-align:middle;


40.给input的height设定一个较小的高度，然后用padding去填充，基本上可以解决所有浏览器的问题 
input{width: 644px;height: 20px;padding: 5px 10px;line-height: 20px;font-size: 12px;outline: none;}
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */

41.div：height等于1px的div，在ie6中可能并不是1px，在这个div的style里加上font-size：1px;这样就ok了。

42.横向列表菜单不光是ul li里要加做浮动，#menu ul li a 里面也加{ display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}。在IE6下在li没有设置宽度，#menu ul li a设置display:block的情况下，将会显示错乱，所以需要在a上增加float:left来修正。

43.解决非ie父元素不能自适应子元素高度问题：定义父元素的overflow：auto;强制撑开元素的高度。

44.解决ie子元素底边界不被解析问题：让父元素浮动，设置：float:left或right;

45.解决ie子元素溢出问题：兼容技巧给父元素定义一个有限高度： 比如1px;  【*html .height{height:1px;}】

46.IE6最小高度最小宽度最大高度最大宽度css写法 


47.IE6最小高度
   .min_height{min-height:200px; _height:expression(this.scrollHeight < 200 ? "200px" : "auto");}
--------------------------------
IE6最大高度
  .max_height{max-height:400px;_height:expression(this.scrollHeight > 400 ? "400px" : "auto");}
--------------------------------
IE6最小宽度
  max-width: 600px;_width:expression(document.body.clientWidth > 600 ? "600px" : "auto");/*_width:expression(document.body.clientWidth < 300 ? "300px" : "auto"); 这是min-width */
--------------------------------
IE6最大最小宽度
.min_and_max_width{min-width:300px; max-width:600px;_width: expression(document.body.clientWidth < 300 ? "300px" :( document.body.clientWidth > 600 ? "600px" : "auto"));}
--------------------------------
IE6最大最小高度
.min_and_max_height{min-height:200px;max-height:400px;_height: expression(this.scrollHeight < 200 ? "200px" : ( this.scrollHeight > 400 ? "400px" : "auto"));}

48.input按钮padding值会随文字的多少变化。按钮元素设置overflow为visible

49.li或者dl有很多浮动原始，如果没有内容不占有他相应的设置宽度位置。给里面的浮动元素设置min-height:1%;_height:1px;

50.PNG图片显示不同，利用pngcrush去掉图片中的Gammaprofiles

51.当子元素相对定位后，父元素要设置：overflow:hidden或auto相当于给子元素设置了position:visible; 给父元素相对定位。

52.input [button]不能margin:0 auto;给input加宽度就行了。

53.复选框单选框与文字对齐问题的研究与解决

以vertical-align:text-bottom为基础的 css代码如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;

54. p:first-child{}必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。