常见问题解决方法*

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; }

八、字数提示字体

九、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>

</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不支持

会员力量，点亮园子希望

刷新页面返回顶部

臭小子1983

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

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

二、表格显示1像素边框

三、万能清除浮动

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

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

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

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

八、字数提示字体

九、li与li之间的空隙

十、IE6的经典BUG——3px

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

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

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

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

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

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

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

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

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

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

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

二十二、字母自动换行

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

二十四、height的问题

About

常见问题解决方法*