今天寫一專題頁面,寫出的結果在各個瀏覽器下都不同,心情不好。。。
就是紅線的地方老對不齊。。。
在朋友指導下改了下樣式好了
右邊代碼結構


1 <div class="fr Img"> 2 <h3>相關專題</h3> 3 <a href="#"><img src="images/zt/gsqmsj/rel_img01.jpg" width="300" height="210" alt="2015屆高三期中試卷"></a> 4 <a href="#"><img src="images/zt/gsqmsj/rel_img02.jpg" width="300" height="210" alt="2015屆高三月考"></a> 5 <a href="#"><img src="images/zt/gsqmsj/rel_img03.jpg" width="300" height="210" alt="2014年全國各地高考試卷"></a> 6 <a href="#"><img src="images/zt/gsqmsj/rel_img04.jpg" width="300" height="210" alt="學案首頁"></a> 7 <a href="#"><img src="images/zt/gsqmsj/rel_img05.jpg" width="300" height="210" alt="高考寶典微信版隆重上線"></a> 8 </div>
之前我是把margin-bottom放在a標簽的樣式中,后來直接把a樣式全刪掉,放到img
上面的h3定義了高度
左邊結構


1 <div class="subject" id="yy_sub"> 2 <div class="top_title"> 3 <h3 class="fl">英語</h3> 4 <a href="#" target="_blank" class="fr">MORE</a> 5 </div> 6 <div class="line"></div> 7 <ul> 8 <li> 9 <a href="#" target="_blank">2015年北京市海淀區高三上學期期末考試語文試卷(帶解析)</a> 10 <span>2014-10-25</span> 11 </li> 12 <li> 13 <a href="#" target="_blank">2015年北京市海淀區高三上學期期末考試語文試卷(帶解析)</a> 14 <span>2014-10-25</span> 15 </li> 16 <li> 17 <a href="#" target="_blank">2015年北京市海淀區高三上學期期末考試語文試卷(帶解析)</a> 18 <span>2014-10-25</span> 19 </li> 20 <li> 21 <a href="#" target="_blank">2015年北京市海淀區高三上學期期末考試語文試卷(帶解析)</a> 22 <span>2014-10-25</span> 23 </li> 24 <li> 25 <a href="#" target="_blank">2015年北京市海淀區高三上學期期末考試語文試卷(帶解析)</a> 26 <span>2014-10-25</span> 27 </li> 28 <li> 29 <a href="#" target="_blank">2015年北京市海淀區高三上學期期末考試語文試卷(帶解析)</a> 30 <span>2014-10-25</span> 31 </li> 32 </ul> 33 </div>
之前是li定義了margin-bottom后來將其刪掉,加了高度,對里面的a和span都加了line-height;然后在一般瀏覽器下就好了
對于ie6 7就用hack設置下不同高度就解決了。。。
自己先記錄下來。
?