【CSS】相容IE7的各個各樣的標題面板
阿新 • • 發佈：2019-01-10
在《【CSS】相容IE6的卡片式佈局》（點選開啟連結）已經介紹過如果用CSS畫出一塊一塊的卡片，現在介紹如何為這些卡片添磚加瓦，為這些卡片的加上標題。
如下圖所示，這是在現在部分網站很常用的兩種標題：
先是在IE8的效果
之後是在IE7的效果：
都是沒有什麼問題的，最後是在IE6的效果，第一種這種嵌入式標籤的標題，有部分問題，但不影響顯示。貌似是因為IE6不支援margin-top為負數。
直接放上上述效果的實現程式碼，再說明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各式面板的製作</title> <style type="text/css"> .p, button, div, span, a { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } .panel { border-bottom: 2px solid #cccccc; border-right: 2px solid #cccccc; background: #ffffff; } .panel_title1 { float: left; background-color: #f00; color: #fff; font-size: 18px; text-align: center; height: 30px; line-height: 30px; margin-top: -7px; margin-left: 10px; } .panel_title2 { line-height: 50px; font-size: 18px; padding-left: 10px; border-left: 6px solid #0000ff; } </style> </head> <body style="background:#eee;"> <div class="panel" style="width:100%"> <div class="panel_title1">標題</div> <div style="clear:both;"></div> <div style="padding:10px;font-size:14px"> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> </div> </div> <div style="height:30px;"></div> <div class="panel" style="width:100%"> <div class="panel_title2">標題</div> <div style="clear:both;"></div> <div style="padding:10px;font-size:14px"> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> </div> </div> </body> </html>
兩個標題都是在一個大面板裡面，不算那個只為清楚float:left左對齊屬性繼承的clear:both，放2個小面板，一個是標題，一個是內容，內容面板注意設定一定長度的padding屬性，以免內容貼著邊框，沒有半點間隙，不好看。
第一個標題，實質上一個小型的面板，利用margin-top:-7px將其強行向上移動7px。
第二個標題，就更簡單的，就是設定一個較粗的左邊框，然後設定一定的padding-left屬性，將裡面的標題文字向右移動一點，以免過於貼著左邊框。