對于處理邊框和行內元素我們應該很熟悉了,因為其規(guī)則很大程度上與外邊距和行內元素的相應規(guī)則相同,這在第7章做過介紹。不過,在此還是簡要地介紹一下。
首先,不論網站建設人員為行內元素的邊框指定怎樣的寬度,元素的行高都不會改變。下面為粗體文本設置上下邊框:
strong{border-top:10px solid gray;border-bottom:5px solid silver;}
重申一句,這個語法在規(guī)范中是允許的,不過它對行高絕對沒有任何影響。但是,由于邊框是可見的,所以將會繪制出來。
邊框該放在哪里就會放在哪里。
同樣地,所有這些只是對行內元素的上下邊成立,左右邊則是另一回事。如果應用一個左邊框或右邊框,不僅該邊框可見,而且文本會在其旁邊顯示(即不會覆蓋),如圖8-37所示:
strong {border-left: 25px double gray; background: silver;}
就像外邊距一樣。如果網頁設計人員設置了邊框,瀏覽器計算換行時并不受行內元素所設置的任何框屬性的直接影響。唯一的作用是邊框所占空間可能把行中的某些部分向后移一點點,而這有可能改變位于行尾的詞。
警告:網站建設CSS邊框的兼容性問題很少。最麻煩的是,Navigator4.x不會在塊級元素內邊距區(qū)周圍畫邊框,而會在內邊距和邊框之間插入一些空間。對于Navigator 4.x,在行內元素上設置邊框(或任何其他框屬性)都可能極其危險。邊框如此,外邊距也是如此,原因是一樣的(這在本章前面討論過)。