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;
}
/*但是,这个属性在其他浏览器下会使背景图消失,那么就用下划线招数*/