CSS一些解决办法收集整理

1. pre自动换行(符合w3c标准并支持多浏览器)

pre{
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
}

* html pre {
word-wrap: break-word;
white-space : normal ;
}

2. 禁止换行

.nowrap{
word-break:keep-all;
white-space:nowrap;
}

3. 段落文字

*{
text-transform:capitalize;/*所有单词首字母大写*/
text-transform:uppercase;/*全部大写*/
text-transform:lowercase;/*全部小写*/

writing-mode:tb-rl;/*竖排版文字(IE支持,FF不支持)*/
}

/*行间距和字间距*/
*{line-height:22px; letter-spacing:0.1em;}

/*首字放大和文字环绕图片,都是通过设置float来实现的.*/

4. 超出部分用"..."代替

*{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

5. table表格边框

*{
border-collapse:separate;  /*边框独立(默认)*/
border-collapse:collapse;  /*相邻边合并*/
}

6.

*{
background-attachment:fixed;  /*图像相对于窗体固定*/
background-attachment:scroll;  /*图像相对于元素固定(默认)*/
}

7. 为ie6准备的招数

/*!important属性,在ie7,ie8,FF等浏览器可以识别,但ie6不能识别*/
*{
border:20px solid #f60 !important;
border:20px solid #f00;
}
/*那么ie6不能理解!important的优先级,因此显示#f00的颜色*/

/*下划线招数与!important相似,在属性前面放一个下划线,符合标准的浏览器就不再认识这个属性并且忽略这个声明,但是ie6会忽略下划线,应用这个声明*/
#nav{
position:fixed;
_position:static;
}
/*所有现代浏览器会把position设置为fixed,跳过未知的第二个规则.ie6则会忽略下划线并且覆盖第一个规则,将position设置为static*/

8. 透明度

*{
opacity:0.5;   /*除了ie6,其他浏览器都理解*/
filter:alpha(opacity=50);   /*用于ie6*/
}

/*内框架iframe的透明，给框架加上属性*/
*{
allowTransparency="true";
}

9. 画一条直线

hr{
height:0;
border:1px solid #ddd;
border-width:1px 0 0;
clear:both;
}

10. 地址栏小图标和收藏夹小图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="favicon.ico" type="image/x-icon" />

11. 最小高宽

方法一:
*{
height:auto !important;
height:200px;
min-height:200px;
}

方法二:
*{
min-height:200px;
height:200px;
overflow:visible;
}

方法三:
/* 最小寬度 */
.min_width{
min-width:300px;/* sets max-width for IE */
_width:expression(document.body.clientwidth < 300 ? "300px" : "auto");
}

/* 最大寬度 */
.max_width{
max-width:600px;/* sets max-width for ie */
_width:expression(document.body.clientwidth > 600 ? "600px" : "auto");
}

/* 最小高度 */
.min_height{
min-height:200px;/* sets min-height for ie */
_height:expression(this.scrollheight < 200 ? "200px" : "auto");
}

/* 最大高度 */
.max_height{
max-height:400px;/* sets max-height for ie */
_height:expression(this.scrollheight > 400 ? "400px" : "auto");
}

/* 最大最小寬度 */
.min_and_max_width{
min-width:300px;
max-width:600px;/* sets min-width & max-width for ie */
_width: expression(document.body.clientwidth < 300 ? "300px":(document.body.clientwidth > 600 ? "600px" : "auto"));
}

/* 最大最小高度 */
.min_and_max_height{
min-height:200px;
max-height:400px;/* sets min-height & max-height for ie */
_height: expression(this.scrollheight < 200 ? "200px" :( this.scrollheight > 400 ? "400px" : "auto"));
}

12. 关于textarea的一点点

/*在FF等浏览器下可以自定义高度,但有时并不需要*/
textarea{
resize:none;
}

/*在ie下,右边会有垂直滚动条,有时并不需要*/
textarea{
overflow:hidden;
}

/*如果设置了背景图片,在ie6下背景图会随着滚动条滚动,其他浏览器不会*/
_textarea{
background-attachment:fixed;
}
/*但是,这个属性在其他浏览器下会使背景图消失,那么就用下划线招数*/