css常见问题解决方案

[css]代码库

1.【IE6对png图片支持】

background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottom-fade.png',sizingMethod='scale');

注：不能使用于背景有定位属性的标记

2.【去除超链接外围虚线轮廓】
[a]
IE下：<a href="#" onfocus="this.blur();"...>
FF下: a{outline:none;}
注：当FF用使用了文字缩进(text-indent:-9999px)为负属性来隐藏<a>文本时,点击就会出现丑陋的虚线轮廓。
[b]
a, a:active {outline: none; }

3.【著名的 Meyer Reset（重置）】
http://meyerweb.com

*{padding:0;margin:0}尽量不要使用*号选择符像这样的得分会很低，正确的办法应该是只对你想设置的标签元素进行设置,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

4.【CSS hack】
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有指定版本可以识别
<!--[if lt IE 7]> Only IE 7- <![endif]-->
只有指定版本以下的可识别
<!--[if gt IE 6]> Only IE 6+ <![endif]-->
只有指定版本以上的可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
指定版本或以下的都可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
指定版本或以上的都可识别

.test{
color:#00C; /* For IE5.5 */
voice-family:"\"}\"";
voice-family:inherit;
color:#000; /* For FF,OP */
[color:#000;color:#0F0; /* For SF,CH */
color:gray\9; /* For IE8 IE7 IE6*/
color:gray\0; /* only for IE8 */
*color:#FF0;color:　#FF0; /* For IE7 IE6*/
_color:#F00;-color:#FF0;(color:#FF0; /* For IE6 */
}
通过以上的样式，你可以在IE5.5里看到蓝色的字，IE6里看到红色的字，IE7看到的是黄色的字，IE8看到的是灰色的字，Firefox/Opera看到的是黑色的字，Safari/Chrome看到的是绿色的字。这里没继续将Firefox和Opera，Safari和Chrome区分。
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}

5.【IE6定义高度很小的容器】
在IE6下无法定义小高度的容器，是因为有一个默认的行高。
列举2种解决方案：overflow:hidden | line-height:0

6.【图片下方出现几像素的空白间隙】
这个也有多种解决方案，
如将img定义为display:block,
或定义父容器为font-size:0，
或设置容器margin-bottom: -5px;
个人更推荐使用vertical-align的方式，它的值可以是text-top | text-bottom | middle等

7.【IE6双倍margin的BUG】
display:inline

8.【文本垂直方向对齐文本输入框】
设置input为vertical-align:middle，textarea也是如此

9.【web标准下设置ie滚动条的颜色】
将设置滚动条颜色的样式定义到html标签选择符上即可

10.【让层在falsh上显示】
不可以，除了少数几个级别很高的家伙除外。
但可以将flash设置为透明，这时层就会透过falsh显示，近似于覆盖在flash之上了，如：
<param name="mode" value="transparent" />

11.【使文字不换行】
定义包含文字的容器为：width:xxx;white-space:nowrap;

12.【点文字时焦点移到输入框】
<label for="test">测试</label><input id="test" type="text" />

13.【被访问过的链接颜色没有变化】
定义链接的样式时，需要按照:link,:visited,:hover,:active这样的顺序，可以使用LoVe HAte（喜欢讨厌）来记忆

14.【单行文本垂直居中】
height:xxx;line-height:xxx; 高和行高相同即可

15.【已知高度的容器在页面中水平垂直居中】
body{
height:100%;
}
#main {
width:200px;
height:200px;
background:#0F0;
position:relative;
top:50%;
margin:-100px auto 0 auto; /*上外边距为高度的一半*/
}

16.【标准模式和怪异模式下的盒模型区别】
标准模式下：实际宽度 = width + padding + border
怪异模式下：实际宽度 = width - padding - border

17.【如何做1像素细边框的table】
方法1：设置table的border-collapse:collapse;
<style type="text/css">
table{border-collapse:collapse;border-color:#000;}
td{border-color:#000;}
</style>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>测试</td>
<td>测试</td>
</tr>
</table>

方法2：关键在于设置cellspacine="1"，用间隙来作为边框
<style type="text/css">
table{background:#000;}
tr{background:#fff;}
</style>
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<td>测试</td>
<td>测试</td>
</tr>
</table>

18.【以图换字的几种方法及优劣分析】
以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：

方法1：使用text-indent的负值，将内容移出容器；
方法2：使用display:none，将内容隐藏；
方法3：使用padding将文字挤出容器之外，并将超出的部分hidden;
方法4：使用font设置超小字体，达到隐藏内容的目的。

方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。
方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。
方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。
方法4（强烈推荐）只需要将字体和行高设置为0，然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。

19.【如何容器透明，内容不透明】
假设在标准模式下有如下结构：
<div class="outer">
<p class="inner">我不要透明</p>
</div>
IEonly的方法：在父容器outer被设置为透明后，只需要将子容器inner设置为position:relative; 如果需要兼容其它浏览器，则以上的方法不适用，且结构也需改为：
<div class="outer"></div>
<div class="inner">我不要透明</div>
然后使用position + z-index搞定位置

20.【如何使得表格的宽度固定】
设置table为table-layout:fixed;这时表格将使用固定布局算法，多出的内容将不影响表格的宽度

21.【ie6下实现position:fixed】
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;} /*去掉外部的滚动条*/
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置right:17px的原因*/
</style>
<![endif]-->

22.【去掉IE默认的滑动条】
html{overflow:auto;}
body{width:0%;}

23.【定位属性在元素中的层级关系】
a.在没有定位属性的兄弟元素中，一般在html结构下面的元素层级高于结构上面的元素。
b.兄弟元素中有定位属性的元素层级高于没有这两个属性的其他兄弟元素。
c.兄弟元素中有position:relative和position:absolute定位属性的元素，结构下面的元素层级高于结构上面的元素，但是有z-index设置时，z-index值大者居上。
d.非兄弟元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

24.【半透明层】
#mask{
<!--[if IE]>filter: alpha(opacity=50); /*for IE*/<![endif]-->
opacity: 0.5;
}

25.【Sticky Footer(让页脚永远停靠在页面底部，而不是根据绝对位置)】
HTML：
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
CSS：
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

26.【跨浏览器最小高度设置】
.element { min-height:600px; height:auto !important; height:600px; }


27.【CSS画三角形】
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 30px 30px 30px;
height: 0px;
width: 0px;
}

28.【解决子元素浮动后高度不能自动适应】
.parent{overflow:auto; zoom:1;/*为兼容IE6用:*/height:1%;}

 

29.【让超出宽度的文字显示为省略号】
overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;


30.【如何使得表格的宽度固定】

设置table为table-layout:fixed;这时表格将使用固定布局算法，多出的内容将不影响表格的宽度


31.【解决ie下当li中出现2个或以上的浮动时，li之间产生的空白间隙】

设置li的vertical-align，值可以为top | text-top | middle | bottom | text-bottom