******常见问题解决方法*******

一、图片下面有空隙。解决办法：给图片加display:block样式，或者vertical-align:middle样式。

<style type="text/css">
body,ul{ border:0px; margin:0;padding:0; font-size:12px; line-height:25px; }
ul { list-style:none; }
.tab li { float:left; padding:3px; border:1px #CCCCCC solid; margin-right:5px; }
.tab li img { display:block; } 
</style>

<div class="tab">
<ul>
<li><img src="images/ico_0.jpg" alt="ico0" /></li>
<li><img src="images/ico_1.jpg" alt="ico1" /></li>
<li><img src="images/ico_2.jpg" alt="ico2" /></li>
<li><img src="images/ico_3.jpg" alt="ico3" /></li>
</ul>
</div>

 

二、表格显示1像素边框

<style type="text/css">
body,ul{ border:0px; margin:0;padding:0; font-size:12px; line-height:25px; }
ul { list-style:none; }
img { vertical-align:middle }
table { border-collapse:collapse }
td { border:1px solid #ccc };
</style>

<table width="347" height="179" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

 

三、万能清除浮动

<style type="text/css">
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */
 
</style>
<!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
    zoom: 1;            /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
}
/* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

 

另外，我见到了一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

html body div.clear,
html body span.clear{
    background: none;
    border: 0;
    clear: both;
    display: block;
    float: none;
    font-size: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。 

 

 

四、文字不显示到可见区域  text-indent:-9999px;

问题：如果text-indent值为-99999px; 在DW内背景会移出，浏览正常

        如果text-indent值为-9999px问题解决

 

 

五、页面背景随着滚动条而滚动

html {
    background:url(../images/bg5.jpg) center 0 fixed no-repeat;
}

 

 

六、解决div下英文不自动换行的问题

　　div { word-wrap:break-word;overflow:hidden; }

 

 

七、让块元素的默认高度消失 - 重要

问题：定义一个块元素为nav高度为6px，但在ie下块元素会有一个默认的高度，这样nav高度就不会为6px，解决方法在nav中加上overflow:hidden;，隐藏多余的度高

.nav { width:220x; height:6px; background:(xxx) no-repeat; overflow:hidden; }

 

 

八、字数提示字体

<style type="text/css">
.countTxt em {
font-family: Georgia,Tahoma,Arial;
font-size: 26px;
position: relative;
top: -5px;
vertical-align: middle;
}
</style>

 

<div class="countTxt">
<em>137</em>
</div>

 

 

九、li与li之间的空隙

E6/7的Bug：纵向排列的li中加浮动元素产生向下3px的空隙

最近做页面时，经常碰到用 li 标签做纵向列表的时候，会在li的下面产生3px的空隙，之前也碰到过，但都用简单的方法解决了。

 

产生的问题：我发现问题还是在于，如果 li 不浮动并且触发了 hasLayout，那么就会有空隙。所以用触发 hasLayout 来闭合浮动的方法在这里就会导致空隙。 

 

触发的情况有2种：

1、li中所有的子元素均浮动，并设置了宽、高或zoom中的一项或多项。

2、li中最后一个不浮动的子元素为块级元素，且不是最后一个子元素，同时li设置了宽、高或zoom中的一项或多项。

 

解决方案：

找到了起因就有了解决方案，这里提供4种解决思路。

1、给li添加浮动也就是给li的class设置float:left，如有需要可设置宽度。

 PS：给li加浮动，让它和子元素一样浮动起来，并真正拥有子元素，而不止是形式上

2、把li设置成display:inline-block（变成inline也可以，但是样式就杯具了）

3、为li中所有元素都设置vertical-align值，此值可为top, bottom, middle, text-top, text-bottom, middle, sub, super中的一项（有博文说可设置vertical-align的任何值，这是错的，有些值不能解决bug，比如auto，centrial ）

4、从代码设计上避免bug的产生：在li中有意识地加入inline 或 inline-block的元素，放在哪里都可以；或者使最后一个元素不浮动，不管它是不是块级元素、前面还有没有不浮动的元素

 

 

十、IE6的经典BUG——3px

ie6下一个容器的浮动和文字之间会产生3px的间距。

解决3px文本慢移的方法有以下几种：

1、给浮动的盒子添加一个margin-right:-3px;（与浮动方向反方向）。

2、给出现了3px文本慢移的盒子加上zoom：1。

3、让最后一个盒子减少三个像素，这就需要用到!important这个关键字了（让其它盒子也可以，那个方便就设那个）。

4、* html {height: 1em;}，原理与zoom:1相同，为了激发IE的haslayout。

<style>
.float { float:left; width:200px; height:200px; background-color:#CCC; _margin-right:-3px }
</style>

<div class="main">
    <!-- 当浮动时ie6下文字会与div之间有3个像素的间隙，解决方法就是将将box的maring-right:-3px; -->
    <div class="float"></div>
        正式发布韩国防空识别区(KADIZ)扩大方案
</div>

 

十一、IE6的经典BUG——浮动双边距

当一个盒子像左浮动的同时有一个向左的margin-left的时候，IE6解析这段代码时就会把margin-left解析为原来的2倍，这个就是所谓的浮动双边距BUG。

同理当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。

但是如果浮动的方向和margin方向是相反的话是不会出现双边距BUG的。

 

能够解决浮动双边距的方法有很多，下面我们就给出2种最常用的方法：

1、给浮动盒子添加属性display:inline;将浮动盒子属性改为内联，就可以了。

2、使用IE6特有的选择符下划线（_），将现在的margin值改为原来的一半。

<style>
.floatBox { float:left; width:200px; height:200px; background-color:#CCC; margin:0 50px; display:inline; }
</style>

<div class="main">
    <!-- ie6下的margin距左为100px产生了双边距的问题 -->
    <div class="floatBox"></div>
    正式发布韩国防空识别区(KADIZ)扩大方案
</div>

 

 

十二、超链接访问后hover样式消失的解决办法

 在IE6环境下，超链接被点击之后就不在具有:hover和:active样式了

 网络上流传的解决这个BUG的方法无非是两种：

1、更改：link，:hover，:visited，:active的排列顺序，由原来的L-H-V-A改为L-V-H-A。

2、使用Javascript去解决。

相比较而言，我更倾向于使用第二种方法去解决这个BUG，理由有3：

1、使用Javascript不会改变代码的原有结构。因为W3C一直强调：link，:hover，:visited，:active的顺序是不可更改的，如果我们更改了这个顺序来解决某个BUG而失去了W3C的标准认证，似乎是一件得不偿失的事情；

2、使用Javascript或许更符合标准；

3、由于这个BUG只在IE6一个浏览器中出现，如果更改了顺序会殃及到其他浏览器。有人说可以使用IE6的条件注释，但是我们要知道的是IE6的条件注释并非标准。

其实我一直只使用:hover这一个伪类，其他的效果都是用Javascript去解决的，不影响代码结构，不影响标准，何乐而不为。

 

十三、ie6 不支持fixed 解决方法

<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{ border:1px solid #000; position:fixed; right:0px; top:0px; background:url(images/main.jpg) no-repeat; width:1000px; height:950px; }
</style>

 /* 需要加此代码 */
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}       
body{height:100%; overflow:auto;}
#gs{position:absolute; right:18px;}
</style>
<![endif]-->

<div id="rightform">
    <p>11111111111111111</p>
    <input id="gs" name="gs" type="text" value=""  />
</div>    

 

十四、让定位元素居中  position:absolute; 

<style type="text/css">
body { margin:0; border:0; padding:0; }
span {
    width:1000px; 
    height:500px;
    border:1px solid red;
    position:absolute; 
    left:50%;
    margin-left:-500px;
}
</style>

<span>
sssdfsdfsdf
</span>

样式中如果元素的宽度为1000px，margin-left为500px

 

十五、IE6下多出来的那头猪 

 BUG产生的原因：

原因一：多数是CSS注释造成的

1、不放置注释。
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的之间
4、去除文字区块的固定宽度，与3有相似之处。

当 1 条注释时，则多出来 1 个字；2 条注释时，则多出来 3 个字；3 条注释时，则多出来 5 个字……
我们会从上面的规律中得到这样一个公式：溢出文字的字数 = 注释的条数 *2-1，出现多出来的字

  

十六、不允许用户在页面中选择文字

.boxA{　　// boxA中的文字用户选取不到

-moz-user-select:none;

-webkit-user-select:none;

 } 

 

十七、如何除去input表单处在焦点时会出现默认的边框

 input{outline:none}  

 

十八、复选框或单选框与文字对齐的问题

单选框   复选框

当文字14px左右大小时，对齐良好

 

单选框   复选框

当文字12px左右大小时，文字的位置就偏下了，火狐浏览器和谷歌浏览器下尤为明显

 

单选框   复选框

当文字12px左右大小时，单（复）选框设置vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;样式后的表现

 

单选框   复选框

当文字12px左右大小时，单（复）选框设置height:13px; vertical-align:text-top; margin-top:0;样式后的表现

 

单选框   复选框

当文字12px左右大小时，单（复）选框设置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;样式后的表现

 

单选框   复选框

当文字12px左右大小时，单（复）选框设置height:14px; vertical-align:top;样式后的表现，chrome谷歌浏览器下文字稍微偏上

 

单选框   复选框

当文字12px左右大小时，单（复）选框设置vertical-align:middle; margin-top:-2px; margin-bottom:1px;样式后的表现

 

 

十九、 ie6 容器 display:none占位问题

<ul>

　　<li>1</li>

　　<li>2</li>

　　<li style="display:none">3</li>

　　<li style="display:none">4</li>

　　<li style="display:none">5</li>

　　<li class="other">6</li>

</ul>

这种结构有的时候隐藏的li会空占一个位置

解决方法：给li 加一个display:inline;

 

 

二十、 chrome下默认字体不能低于12px

 谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示，有时我们需要字体小点，特别是在制作英文网站时，所以很蛋疼。不过还是有解决方案的。看下面：

在html或者body里添加一句谷歌浏览器专有的属性。

html,body{
      -webkit-text-size-adjust:none;
}

 

 

二十一、超出盒子的文字用...省略号来代替

<style>
body { font: 12px/1.5 tahoma,arial; }
.text { height: 23px; line-height:23px; margin-left:10px; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; width:100px; }
</style>

<div class="txt">
　　新建文件夹新建文件夹新建文件夹新建文件夹
</div>

 

 

二十二、字母自动换行

.mm { width:123px; height:85px;word-break:break-all;border-collapse: collapse; table-layout:fixed; }

 

<div class="mm">武神密宝武神密保卡可以用于绑定武神通行证，在用户执行敏感 操作时为武神通行证提供一层额外的坐标密码的认证保护。层额外的 坐标密码的认证保护。</div>
<div class="nn">asdfqwerqwerqerqwerqewr</div>
<div class="nn">asdfqwerqwerqerqwerqewr</div>

 

 

二十三、去除到ie下文字带链接的虚线

第一种方法 

a { text-decoration:none;

　　color:#fff;

　　outline: none; /* firefox */

　　hide-focus: expression(this.hideFocus = true); /* ie */

　　text-decoration:none;

}

 

第二种方法：

 <a id="test" href="#" hidefocus="true">去掉虚线框</a> 

 

二十四、height的问题

1、如果height为100%，以父级的高度来计算.

.box { width: 200px; height: 200px; border-radius:10px; border: dashed 2px #e4e5e6; }
.childer { width: 200px; height: 100%; background-color: #e4e5e6; }

<div class="box">
    <div class="childer"></div>
</div>

如果childer不写高度则为0

 

2、如果body的子元素要设置为100%的高度，需要设置position: absolute.

body { margin: 0;}
.box { width: 200px; height: 100%; border-radius:10px; border: dashed 2px #e4e5e6; position: absolute }
.childer { width: 200px; height: 100%; background-color: #e4e5e6; }

<div class="box">
    <div class="childer"></div>
</div>

此方法IE6不支持