骨灰級清除浮動
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
*zoom:1; //兼容ie
}
內聯元素相連之間存在間隙問題
原因:內聯元素是當做字體來處理的，字體之間是有間隔的
解決方法:
1.多個標簽寫在一行
2.將要閉合標簽的地方與開始標簽的地方重合
3.使用注釋頭尾相連
4.在父級上寫：font-size:0;
5.使用display：block(img是內聯元素)
6.使用letter-spacing屬性
塊級元素包裹內聯元素的時候，總會出現幾像素的差問題
<!--例子1-->
<div>
<img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg">
</div>
<!--例子2-->
<ul>
<li>
<img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg">
</li>
</ul>
<!--例子3-->
<div>
<span>asdasdasd</span>
</div>
解決方法：設置內聯元素屬性:display:block;
CSS垂直居中方法
使用時一定要給出元素寬高
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
CSS Hack
指的是針對不同的瀏覽器寫對應的CSS
有三種hack方式
1.html hack(添加不同的類來區別)
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
2.選擇器 hack
* html .test{color:#090;} /* For IE6 */
* + html .test{color:#ff0;} /* For IE7 */
3.屬性hack
color:#fff\0; /*：選擇IE8+和Opera*/
color:#090\9; /* For IE瀏覽器 */
*color:#f00; /* For IE7 */
_color:#ff0; /* For IE6 */
ie6.7不支持box-sizing: border-box問題
解決:使用https://github.com/Schepp/box-sizing-polyfill這個墊片,穩定性差
注意：*behavior: url(../resource/js/lab/boxsizing.htc);這個URL是相對於HTML頁面的！！
ul中li下面的間隔線用li布局邊框問題
在IE低版本下有bug，會多出li的寬高
解決:間隔線使用li的border去做
ie8及以下的瀏覽器不支持:befor.:after問題
使用left:expression(eval(document.documentElement.scrollLeft))與top:expression(eval(document.documentElement.scrollTop))
.leftTop{
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop));
}
低版本瀏覽器下position:fixed閃動問題
解決:
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
IE6雙倍margin,padding邊距的問題
內部元素一旦浮動，就會出現雙倍的BUG
解決:給內部元素添加display:inline屬性
IE6中設置寬高位10px的時候出現的是長方形問題
這個現象的另一種情況是:在IE6中定義比較小的高度問題。
原因:IE6有默認行高
解決：使用font-size:0;line-height:0;
IE6無法識別偽對象:first-letter/:first-line問題
類似這樣解決:
p:first-letter {}
在first-letter與"{"間增加空格
IE6下忽略!important問題
如下寫法在IE6下不起作用
div{
color:#f00!important;
color:#000;}
解決:更改寫法
div{color:#f00!important;}
div{color:#000;}
父元素與子元素之間的margin-top問題(BFC問題)
現象:給第一個子元素設置margin-top屬性后，父元素也會下移
代碼示例:
<style type="text/css">
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content{
background-color:#6699FF;
width:200px;
height:200px;
}
</style>
<div class="wrapper">
<div class="content"></div>
</div>
解決:
1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）
2、為父元素添加overflow：hidden；樣式即可（完美）
3、為父元素或者子元素聲明浮動（float：left；可用）
4、為父元素添加border（border:1px solid transparent可用）
5、為父元素或者子元素聲明絕對定位
元素浮動導致父元素塌陷問題
見例子:
<div class='outer' style="width: 300px;background-color: gray">
<div class='innner' style="width: 100px;height: 100px;background-color: blue;float: left;"></div>
</div>
解決方法：
1.給父元素添加overflow:hidden屬性
2.給父元素添加清除浮動偽類
.outer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
IE6中li之間會有間距
解決方法：float: left;
IE6挨着的div元素產生3像素差值問題
解決:使用絕對定位然后內補邊
相鄰的塊狀元素margin疊加問題(BFC問題)
見例子:
p{
margin-bottom: 100px;
margin-top: 100px;
}
...
<div>
<p>asdasdasdas中國</p>
<p>asdasdasdas中國</p>
<p>asdasdasdas中國</p>
</div>
結果p直接的margin發生了合並變成了50px。
解決:給最后一個p元素添加left/right浮動，觸發BFC。
參考鏈接:解決margin合並（折疊）的方法