常用CSS和jquery記錄

1.換行

div自動換行的css:

word-wrap:break-word; 
word-spacing:normal;

pre自動換行的css:

  word-wrap:break-word;
  white-space: pre-wrap;

2.li的樣式，把前面的點設置爲內聯，並設置點得顏色

list-style: inherit;
list-style-type:square;
color:#5b5b5b;

3.jquery的each

$(document).ready(function(){
var cs= $("#midshowleft .midcategory");
$(cs).each(function() {
$(this).click(function(){
$(cs).each(function(){
$(this).removeClass().addClass("midcategory");
});
$(this).removeClass().addClass("sel midcategory");
});
});
});

4.css中設置透明

background: #fff;
opacity: .5;
filter: alpha(opacity=50);

5.IE6下min-height不管用

min-height:500px;
_width:500px; _white-space:nowrap;

6.IE8下報這個錯

HTML Parsing Error: Unable to modify the parent container element before the

是因爲body沒加載完成，js就操作了document

解決方法http://www.cnblogs.com/acker/archive/2011/07/27/2117927.html

7.IE6下border-bottom位置不對

_display:inline-block;/

8.設置span的寬度

display:-moz-inline-box; 
display:inline-block; 
width:150px; 

9.圖片和文字水平對其

測試文字<span style="vertical-align:middle;"><img src="images/head/head_line.png" /></span> 

10.圖片原比例縮放，並且水平、垂直方向居中

.waiceng{
        width:498px;
        height:468px;
        border:1px solid #cfcfcf;
        text-align:center;
        overflow: hidden;
        vertical-align: middle;
        display: table-cell;
}
.neiimg{
        max-width:498px;
        max-height:468px;
        _width:498px;
        _height:498px;
        _white-space: nowrap;
}

<div class="waiceng">
<img src="xxx" class="neiimg" />
</div>

11.textarea不可變

resize: none;

12.IE7下的css問題

1.如果使用position:absolute，定位必須2點定位，

   eg:bottom:4px;   錯

         bottom:4px; right:5px;   對

   父級元素必須使用position:relative  

2.使用li時，float:left; 必須指定li的寬度，否則會多出來一塊

   如果<a>裏面包含圖片，則要設置圖片的css: img{position:relative; z-index:1;};  否則鏈接失效

3.ie8下網站直接死掉(c0000005 ),原因竟然是html標籤沒有結束，以後寫html代碼要嚴謹