代码改变世界

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

2012-05-19 19:26  臭小子1983  阅读(450)  评论(0编辑  收藏  举报

一、图片下面有空隙。解决办法:给图片加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。

1 <style>
2 .float { float:left; width:200px; height:200px; background-color:#CCC; _margin-right:-3px }
3 </style>
4 
5 <div class="main">
6     <!-- 当浮动时ie6下文字会与div之间有3个像素的间隙,解决方法就是将将box的maring-right:-3px; -->
7     <div class="float"></div>
8         正式发布韩国防空识别区(KADIZ)扩大方案
9 </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值改为原来的一半。

1 <style>
2 .floatBox { float:left; width:200px; height:200px; background-color:#CCC; margin:0 50px; display:inline; }
3 </style>
4 
5 <div class="main">
6     <!-- ie6下的margin距左为100px产生了双边距的问题 -->
7     <div class="floatBox"></div>
8     正式发布韩国防空识别区(KADIZ)扩大方案
9 </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;
}

 

 

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

1 <style>
2 body { font: 12px/1.5 tahoma,arial; }
3 .text { height: 23px; line-height:23px; margin-left:10px; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; width:100px; }
4 </style>
5 
6 <div class="txt">
7   新建文件夹新建文件夹新建文件夹新建文件夹
8 </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%,以父级的高度来计算.

1 .box { width: 200px; height: 200px; border-radius:10px; border: dashed 2px #e4e5e6; }
2 .childer { width: 200px; height: 100%; background-color: #e4e5e6; }
3 
4 <div class="box">
5     <div class="childer"></div>
6 </div>

如果childer不写高度则为0

 

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

1 body { margin: 0;}
2 .box { width: 200px; height: 100%; border-radius:10px; border: dashed 2px #e4e5e6; position: absolute }
3 .childer { width: 200px; height: 100%; background-color: #e4e5e6; }
4 
5 <div class="box">
6     <div class="childer"></div>
7 </div>

此方法IE6不支持