ie系列採用的是微軟自己的盒子模式,firefox採用的是標準的w3c盒子模型。
從可以看到 IE 盒子模型的範圍也包括 margin、border、padding、content,和標準 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding。
從可以看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content,並且 content 部分不包含其他部分。
在實際的操作中可採用如下方法避免如上不同。
Padding-left:40px;
width:920px !important;//firefox
width:960px;
2、 當好幾個DIV層通過float:left和margin-left布局時,ie6中有bug,ie6預設會把第一個層的margin-left做雙倍處理。
3、 當即可以用margin,也可以用padding時,盡量使用margin,當用dreamweaver中設計模式參看時,用margin能與實際頁面效果更加接近。
4、 當出現如下狀況時:
<div id="baihuiimage">
<img src="images/banner.jpg">
</div>
盡量改成:<div id="baihuiimage"><img src="images/banner.jpg"></div>,這樣寫效果更加正確。
5、 css sprites技術(背景圖片拼接技術)技巧:首先,用photoshop把背景圖片整合到一起,產生一張png圖片。然後在寫css時用background-position定位,用bg2css這個工具測出位移量。Css 如下:
background:url(../images/index.png) no-repeat -961px -78px;
6、 當使用list-style-image屬性時,css sprites會無法確定其位置,這時可使用li的background代替:如下:
background:url(../images/index.png) no-repeat -961px -78px;