******常见问题解决方法*******
2012-05-19 19:26 臭小子1983 阅读(449) 评论(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}
十八、复选框或单选框与文字对齐的问题
十九、 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;
}
第二种方法:
二十四、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不支持